Резиновая верстка сайта — что это такое?

Внимание! Статья для тех людей, кто хоть чуть-чуть разбирается в сайтостроении. Здесь будет рассмотрена резиновая верстка и ее основные особенности.

Те, кто хоть немного что-то понимает в процессе верстки сайтов, обычно сталкиваются с терминами «резиновый макет», «тянущаяся ширина» и т.д. Все это термины, напрямую касающиеся резиновой верстки сайта. Что это такое? Давайте посмотрим.

Простые виды верстки можно разделить на фиксированную и резиновую. В чем особенность резиновых размеров? Ширина блоков меняется с уменьшением или увеличением ширины окна браузера. Например, если вы прописали вашему сайту ширину в 100%, то у него никогда не появится горизонтальный скролл (полоса прокрутки), сколько бы вы ни уменьшали окно. Тут, я думаю, понятно. Примеры таких макетов можно найти в интернете.

Роль max-width и min-width в резиновой верстке сайта

Очень важно прописать css-свойства max-width и min-width. Например, при максимальной ширине в 1320 пикселей, если пользователь откроет ваш сайт на большом мониторе, ваша верстка перестанет тянуться на весь экран и приобретет фиксированные размеры. В то же время, задание минимальной ширины позволит содержимому не уменьшиться настолько, что его уже просто невозможно будет читать.

резиновая верстка - прописывание максимальной и минимальной ширины блоку

Прописывание максимальной и минимальной ширины блоку с идентификатором «wrap»

Итак, всегда задавайте max-width, min-width вместо того, чтобы просто писать width, то есть фиксированную ширину. Ее можно прописывать непосредственно дочерним блокам, но никак не общим контейнерам. Это также закладывает адаптивность. Применив на пару с max-width пару медиа запросов можно сделать свой сайт адаптивным, что значительно улучшит его удобство для мобильных пользователей.

Какой должна быть резиновая верстка на div-блоках?

Как я уже и сказал, простое задание ширины в процентах не считается хорошим тоном верстки. Если вы пропишите вместе с этим max-width и min-width, то получите гораздо более гибкий макет. Я объясняю почему.

Вот прописали вы для вашего главного контейнера (в котором будут все блоки, а простым языком – весь сайт) ширину 100%. Вы понимаете что это значит? Зайдет пользователь с разрешением экрана 1920×1080 и увидит широченный сайт с очень длинными текстовыми строками, из-за чего чтение будет очень неудобным. Вам вообще удобно читать, когда строка шириной в полметра? Сомневаюсь.

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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Хотите избавиться от этих проблем? Хотите, чтобы сайт хорошо смотрелся на всех устройствах? Так прописывайте вы мax-width и min-width. Такая резиновая верстка будет гораздо более универсальной.

резиновые блоки

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

Ситуация та же. На ваш сайт зашел пользователь с широким экраном. А у вас, к примеру, в верстке записано: max-width: 1440px. Ага, браузер понял указание и не даст контейнеру стать шире, чем указанная максимальная ширина. А значит пользователь не увидит перед собой тот самый широченный сайт, а будет наблюдать вполне симпатичный отцентрированный каркас. Но тут появляется другая проблема – пустое место по бокам. Если вас это не устраивает, проблему можно решить с помощью медиа-запросов и адаптивной верстки. Получается своего рода резиновая адаптивная верстка. О медиа-запросах можно почитать в других статьях.

А теперь заходят на ваш сайт с мобильника. Человек уже не увидит сжатый донельзя блок, но для этого, опять же, нужно дописывать медиа-запросы (то есть реализовывать адаптивный дизайн).

А об этом мы поговорим в следующий раз. А пока грамотно используйте резиновые блоки и не забывайте подписываться на обновления блога.

Добавить комментарий