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

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

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

Простые виды верстки можно разделить на фиксированную и резиновую. В чем особенность резиновых размеров? Ширина блоков меняется с уменьшением или увеличением ширины окна браузера. Например, если вы прописали вашему сайту ширину в 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 и увидит широченный сайт с очень длинными текстовыми строками, из-за чего чтение будет очень неудобным. Вам вообще удобно читать, когда строка шириной в полметра? Сомневаюсь.

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

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

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

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

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

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

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: