Просмотров: 4 390

Правило №1 для адаптивной (мобильной) верстки — очень аккуратно с абсолютными размерами.

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

Подробнее о способах задания размеров в CSS можно почитать здесь:

//webgyry.info/razmeri-css-length

Т.е. никаких пикселей, миллиметров и.т.д. использовать очень не рекомендуется.

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

Например, такими элементами могут быть баннеры на ваших сайтах.

Либо какие-то картинки с маленькими размерами.

Какие размеры тогда использовать?

Нужно стараться использовать только относительные размеры: проценты (%) и em.

Вы можете указать размеры в процентах для главного контейнера, всех элементов, но если хотя бы один из вложенных в этот контейнер элементов будет иметь размер в абсолютных единицах, все ваш сайт на мобильном устройстве будет выглядеть примерно вот так:

2016-02-09 06-29-56 Техническая помощь блоггерам и ведущим сайтов webgyry.info – Блог Дмитрия Ченгаева – Yandex

Какие-то блоки будут выходить за пределы области просмотра, либо все будет очень мелким.

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

Без-имени-1

Блок с размерами в % масштабируется под нужный размер ширины браузера. А блок с размерами в пикселях остается без изменений.

Учитывайте это простое правило. Это основы мобильной верстки.