Быстрая и удобная резиновая верстка через vw и rem

Часто требуется быстро сверстать страницу, с поддержкой хотя бы наиболее распространенных устройств и браузеров, притом чтобы выглядела страница одинакова для любой ширины экрана, строго по дизайн макету. Не уж то у вас не было такой ситуации, когда дизайн получаешь в двух размерах — для десктопа с шириной 1440px и мобайл 320 или 375 (еще и pixel perfect), а на вопрос как страница должна выглядеть для других размеров, например для планшетов или маленьких дисплеев, получаешь вполне адекватный ответ заказчика или дизайнера — красиво.

После некоторых экспериментов с относительными единицами, я пришел к довольно таки приятному, в плане удобства, методу верстки (скорее всего не я первый). Хотя безусловно он имеет и свои минусы, которые критичны в некоторых проектах.

Для достижение такой резиновости, что представлена на гифке сверху, потребуется указывать все размеры элементов, отступов, размеров шрифтов и проч. в относительном ширине окна — vw. Если дизайн представлен в размере 1440px, а элемент с размерами 300px x 200px то соотношение их от всей шириной макета будет 300 / 1440 ≈ 0,2, а в vw 0,069 * 100 = 20vw и 13.8vw соответсвенно. Так соотношение сторон элемента всегда будет одинаковым для любой ширины окна браузера. Так же и с размерами шрифтов, высоты строк, отступов и проч.

Но высчитывать, округлять и указывать в долях каждый размер точно не ускорит верстку, а только добавит нудной калькуляций. Поэтому прибегнем к rem. Rem — задаёт размер относительно шрифта , пропишем такое соотношения:

Смысл расчета понятен — 1 rem равен отношению всей ширины экрана (100vw) к той величине относительно которого мы указываем размеры (1440), иначе сколько px содержится в одной vw для данного размера макета.

Теперь для определение размера достаточно указывать в rem, для примера выше — 300rem и 200rem. Отношение размеров сохраняется при любой ширине окна браузера. Для ширины 1440px гарантированно будем иметь 300px ширины и 200px высоты.

Стоит учитывать что при такой верстки 1440rem (или та ширина макета относительно которого вы верстаете) это 100vw. А задание ширины блока 100vw в Linux и Windows вызовет появление горизонтального скролла так как вертикальный скроллбар является частью окна браузера. Поэтому не стоит превышать общую ширину всех элементов больше чем 1440rem. Или, если условия позволяют, использовать %.

Для удобства верстки относительно другой ширины, например для верстки мобайл (320px) можно просто поменять соотношения через media и указывать уже размеры которые даны в макете:

@media screen and (max-width: 480px) < html >

Для ультрашироких 4k мониторов можно прописать media снизу чтобы зафиксировать размеры в той максимальной ширине относительно которого верстаете:

@media screen and (min-width: 2560px) < html >

Минусы у этого метода конечно же есть:

• фактически отсутсвует возможность браузерного масштабирования, из за использования vw
• неполная поддержка calc и vw в браузере IE

Спасибо за внимание. Буду рад почитать вашу конструктивную критику

Источник

Верстка сайта Меню CSS верстка сайта Жесткая верстка блоками © 2010

Обратите внимание на пунктирную границу левой колонки, которая почему-то не доходит до низа. Подобные ньюансы легко устраняются с помощью атрицательного значения атрибута margin . Например, margin-bottom:-15px обрежет лишнее (смотрите следующий пример).

Жесткая HTML CSS верстка блоками в три колонки

Пример жесткой блочной верстки сайта в три колонки:

Верстка сайта Меню CSS верстка сайта Жесткая верстка блоками Ссылки © 2010

Блочная верстка предпочтительнее табличной верстки. предоставляет больше возможностей для форматирования и дизайна. требует умения работать с атрибутами margin, padding, float, clear .

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

Резиновая HTML CSS верстка блоками

Пример резиновой верстки сайта с помощь блоков:

Верстка сайта Меню CSS верстка сайта Резиновая верстка блоками

Мы видим, что правая колонка сползла вниз ⇒ добавим к селектору div.right_col параметр margin-top:-20px .

• padding-left: – определяет внутренний отступ слева.
• margin-top: – определяет внешний отступ сверху.
• margin-left: – определяет внешний отступ слева.
• min-width: – определяет минимальную ширину.
• max-width: – определяет максимальную ширину.

Левая колонка с параметром float:left фактически накрывает собой правую, так как правая не содержит атрибут обтекания. В свою очередь, параметр margin-left:200px определяет отступ правой колонки, поэтому она не перекрывается. Мы не можем задать обтекание для правой колонки, потому что в таком случае будут недействительны min-width и max-width .

Обратите внимание на значение padding , на ширину пунктирной границы, на размеры.

Резиновая + жесткая HTML CSS верстка блоками

Пример блочной CSS верстки сайта:

Верстка сайта Меню CSS верстка сайта Резиновая верстка блоками © 2010

Поместим левую и правую колонку в контейнер . Отцентрируем его с помощью margin:0 auto . Уберем пространство внизу блока параметром margin-bottom:-16px .

Верстка сайта Меню CSS верстка сайта Резиновая верстка блоками © 2010

Параметр padding:10px прибавляет по 10 пикселей к каждой из сторон, поэтому контейнеру была задана высота в 420 пикселей, а затем его низ был обрезан на 16 пикселей.

Оказывается не так все и сложно. Идем дальше.

Жесткая HTML CSS верстка таблицами

Пример жесткой CSS верстки сайта с помощью таблицы:

vertical-align выравнивает содержимое ячейки по верху, применяется только для ячеек.

Резиновая HTML CSS верстка таблицами

Пример резиновой CSS верстки сайта с помощью таблицы:

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

Автор проекта — Вася Митин | Дата публикации: Март 2010 | Обновление: Ноябрь 2018

CSS позиционирование CSS верстка сайта CSS справка: шрифт

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | CSS верстка сайта блоками? – Не вопрос!

Источник

Фиксированная и резиновая верстки

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

Для решения этой задачи возникло два подхода: первый, при увеличении размеров окна, мы растягиваем контент(резиновая верстка), второй делаем контейнер с фиксированными размерами и спокойно работает внутри него(фиксированная верстка). Оба подхода используются и по сей день, хотя бы как этапы адаптивной верстки.

В фиксированной верстке мы задаем ширину контейнера в пикселях и, как правило, выравниваем его посередине.

.container < width:980px; margin:0 auto; > 

В резиновой верстке ширина задается в процентах

Давайте посмотрим, что мы можем сделать с этим на практике.

В фиксированной верстке центральный блок имеет ширину обычно 980px, так чтобы помещаться на мониторы с любым разрешением, включая iPhone и iPad.

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

С вложенными блоками у нас есть два варианта — сделать их фиксированной ширины, а отступы между ними сделать резиновыми, либо сделать их пропорциональными ширине блока

Внутри одного сайта, мы можем комбинировать элементы резиновой и фиксированных версток.

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

min-width и min-height

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

.container_fluid < width:100%; min-width:980px; > 

Давайте рассмотрим следующий шаблон

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

Серый блок мы можем задать в процентах, но вот с белым блоком все сложнее. Его ширина — это ширина серого блока минус фиксированная ширина синего блока.

Для этого нам может пригодиться функция calc

Допустим ширина родительского блока 100%, ширина левой колонки 200px. Тогда ширину правой колонки мы можем записать как

НАЛИЧИЕ ПРОБЕЛОВ КРИТИЧНО!

Пропорциональное изменение ширины и высоты

Допустим наш шаблон выглядит вот так

Если блоки резиновые при сжатии, мы получим следующую картину

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

Хотелось бы, чтобы блоки уменьшались пропорционально, то есть квадраты оставались бы квадратами

Добиться этого можно следующим образом. Поставить высоту блока 0px, а padding-top равным ширине. Например

.chained_sizes_block < height:0px; width:25%; padding-top:25%; > 

 div class="chained_sizes_block"> div> 

Если Вы попробовали реализовать данную схему, нам остается понять, почему это работает:) Дело в том, что padding, указанный в процентах высчитывает эти проценты не от ширины самого блока, а от ширины блока-родителя, точно также как и ширина. Поэтому 25% в padding-top’e будут равны 25% ширины.

Фиксированные и резиновые верстки в дизайне

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

1. Резиновый шаблон с фиксированной левой колонкой
2. Резиновый шаблон с двумя фиксированными колонками по бокам
3. «Резиновая» галерея картинок
4. Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)
5. Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего
6. Используя calc выровнять блок по центру экрана
7. Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.
8. Шаблоны c http://signature.ai/

results matching » «

No results matching » «

Источник