Можно ли избежать смещения плавающих элементов при изменении размера моего браузера?

Question

Я новичок в мире кодирования, а также CSS и заметил, что когда я изменяю размер своего браузера, все мои плавающие элементы перемещаются вправо, и пользователь вынужден прокручивать горизонтально, чтобы увидеть, скажем, меню.

Во-первых, необходимо ли предотвратить смещение элементов поплавка?

Во-вторых, есть ли способ, которым я могу избежать этого, если я должен предотвратить это?

Answer 1

Поплавки - это боль в заднице.В первую очередь из-за одного браузера, который отказывается следовать универсальным веб-стандартам.Да, тот.

Есть миллион и одна хитрость, чтобы избежать этих проблем.Я приказываю моей команде выполнить следующие шаги:

1. Используйте абсолютно позиционированные элементы экономно.Если вы позиционируете на основе другого элемента, вещи могут «автоматически настраиваться», но не так сильно, когда вещи математически склеены в одну точку.Они имеют свое место, но не на каждом элементе на странице.
2. Рассмотрим «сброс» или макет CSS на основе сетки.Я лично предпочитаю 960 гридов Они берут догадки из разных браузеров.Будет ли IE выдвигать ваши отступы?Будет ли в Firefox заполнение для IE слишком много или слишком мало?Со сбросом и / или сеткой это не так уж и сложно.
3. При работе с процентами (что мне лично очень нравится) помните, что браузер обычно не использует математику, где 1 + 1 = 2.скажем, если у вас есть пространство в 1000 пикселей, и вы делаете два столбца по 50% бок о бок, очень велики шансы, что один будет толкаться ниже другого.Зачем?Потому что поплавки, поля, границы и т. Д. Складываются, и все по-разному в разных браузерах.Итак, подумайте, что .9 + .9 = 2, когда вы разрабатываете.Это работает все время?Нету.Но это только начало.
4. Тест, тест, тест.Такие вещи, как броузеры, Adobe Browser Labs и т. Д. - ваш друг.Используйте их постоянно, чтобы гарантировать, что вы выпускаете качественный код, который выглядит одинаково для всех платформ.
5. Сохраняйте это простым.Возможно, вы работаете над проектом, который требует 100 различных таблиц стилей, охватывающих каждую версию каждого браузера.Большинство из нас работают над реальными проектами с реальными бюджетами ... это означает, что вам нужно быстро и эффективно развертывать.Используйте хороший код, совместимый с w3 и качественный CSS, и вы можете полностью избежать взломов.

Answer 2

Я бы посоветовал вам выяснить, хотите ли вы поддерживать разные разрешения в зависимости от вашей целевой аудитории.Перемещение элементов не обязательно является плохой вещью, и планирование заранее, как вы хотите, чтобы ваш сайт размещался в зависимости от размера области просмотра.

Если вы не можете найти фиксированную ширину, один макетчтобы управлять ими всеми », что соответствует вашим потребностям, взгляните на медиазапросы CSS .Для более практической статьи о них попробуйте A List Apart

. Основная идея заключается в том, что, используя отдельные таблицы стилей, которые зависят от размера, вы можете в основном отображать различные макеты для пользователя в зависимости отих окно просмотра.Пользователи, изменяющие размеры своих браузеров, также смогут динамически видеть новый макет.