Резиновая верстка: универсальная сетка под все брейкпоинты, примеры и правила / Хабр

Верстка
12 Авг, 2023
0

Содержание

5. Фиксированная и резиновая верстки · Неожиданный HTML

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

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

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

.container {
    width:980px;
    margin:0 auto;
}

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

.container_fluid {
    width:100%
}

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

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

Примеры сайтов:

http://alawar.ru
http://film.ru

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

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

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

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

min-width и min-height

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

например вот так

. container_fluid {
    width:100%;
    min-width:980px;
}

calc

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

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

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

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

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

width:calc(100% - 200px)

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

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

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

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

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

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

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

.chained_sizes_block {
    height:0px;
    width:25%;
    padding-top:25%;
}

    <div>
    </div>

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

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

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

Если поля есть, значит скорее всего верстка фиксированная.

Пример бесплатных PSD-шаблонов можно найти на сайте http://freebiesbug.com/psd-freebies/website-template/

Практика:

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

Отзывчивый и Резиновый дизайн landing page. Отличия!

Всем привет. Сегодня хочу поговорить с вами о таких понятиях как адаптивная, фиксированная, резиновая и отзывчивая верстка. Многие путают некоторые из понятии, поэтому хочу разобрать данный вопрос.

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

Так что, если хотите помочь или просто о чем-то почитать на блоге, пишите туда, буду стараться рассматривать ваши вопросы на блоге 🙂

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

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

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

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

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

Здесь просто пропорционально уменьшается контент, а структура не меняется. У меня на картинке с пропорциями проблемы, но думаю суть понять можно:

Адаптивная верстка и Отзывчивая верстка

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

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

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

Например, максимальная ширина экрана была 1170px, тогда мы просто начинаем уменьшать окно браузера и смотреть, в какой момент наш дизайн начинает рушится, тогда добавляем медиа запрос с нужным разрешением, прописываем нужные стили и двигаемся дальше, вплоть до 320px. Ничего сложного… Вопрос мотивации 🙂

Если попытаться как-то обобщить, то я бы сделал это так:

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

Но на практике часто приходится использовать смешанную верстку. Так как придерживаться одного стиля (Адаптивного или отзывчивого) достаточно тяжело. Но при необходимости можно. Важно понимать, что при использовании исключительно отзывчивого дизайна, придется использовать svg графику, так как на разрешении свыше 2000 пикселей ваши png иконки будут смотреться плачевно. Да и глупо грузить изображения, которые готовились под большое разрешение, на устройствах с экраном 800 пикселей.

Мне никогда не приходилось делать сайт используя исключительно отзывчивую верстку, считаю это очень трудоемким процессом, с множеством нюансов. В большинстве же случаев в ТЗ присылают макет ограниченной ширины (1170 — 1200 px), от которого и «пляшем». Постепенно подстраивая дизайн под меньшие разрешения. Я обычно использую медиа запросы+%+ когда нужно — px;

Если вам интересна тема адаптивного дизайна, то подписывайтесь на обновления. Скоро мы поговорим подробнее о медиа запросах, адаптивных картинках, шрифтах и других интересных вещах. А на сегодня — все. Надеюсь удалось вас заинтересовать. Жду ваших комментарий и поправок. Пока!

Rubber Layouts — сочетание статических и гибких макетов

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

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

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

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

Сначала будет контейнер шириной 1000 пикселей.
Second , используя медиа-запросы, мы изменим ширину контейнера на 720 пикселей, когда ширина браузера пользователя составляет 999 пикселей.
В-третьих , как только браузер пользователя станет шириной 719 пикселей, мы изменим ширину основного контейнера на 100%, чтобы все влезло прямо в браузер.
Четвертый и последний этап сделает все внутри контейнера одинаковой ширины. Это изменение произойдет на 479px.

Этап 1 — HTML и CSS

HTML

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

<дел>

   Резина 

  <дел>

<дел>

Это все для HTML.

CSS

Отлично, самое интересное. Мы начнем с определения набора ширины по умолчанию для всего.

 
#контейнер {
ширина: 1000 пикселей;
поле: 0 авто;
фон: #52a0ff;
}

# заголовок {
размер шрифта: 50px;
поле сверху: 50px;
плыть налево;
ширина: 98%;
поле слева: 1%;
поле справа: 1%;
}

#основной{
фон: #ееееее;
плыть налево;
ширина: 68%;
поле слева: 1%;
поле справа: 1%;
высота: 1000 пикселей;
}

#боковая панель{
фон: #dddddd;
плыть налево;
ширина: 28%;
поле слева: 1%;
поле справа: 1%;
высота: 1000 пикселей;
}

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

Этап 2

На этапе 2 ширина контейнера изменится на 720 пикселей.

Экран @media и (максимальная ширина: 999 пикселей) {
#контейнер {
ширина: 720 пикселей;
}
}

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

Этап 3

Когда ширина браузера пользователя составляет 719 пикселей, макет изменяется, и контейнер становится плавным.

Экран @media и (максимальная ширина: 719 пикселей) {
#контейнер {
ширина: 100%;
}
}

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

Этап 4

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

Это решает проблему с iPhone, Android и т.п.

Экран @media и (максимальная ширина: 479 пикселей) {
# заголовок {
ширина: 98%;
}

#основной {
ширина: 98%;
}

#боковая панель {
ширина: 98%;
}
}

Готово!

Вот оно! У нас есть полнофункциональный резиновый макет с четырьмя этапами в зависимости от размера браузера. Широкоформатные, маленькие экраны, маленькие экраны и портативные устройства.

Загрузите исходные файлы

Если вам нравится, как работают резиновые макеты, вас ждет сетка: BluCSS.

Эта страница может содержать партнерские ссылки. Без каких-либо дополнительных затрат для вас мы можем получать комиссию с любой покупки по ссылкам на нашем сайте. Вы можете ознакомиться с нашей Политикой раскрытия информации в любое время.

html — Как выровнять в «резиновой» верстке с узкими экранами?

Задавать вопрос

спросил 9 лет, 6 месяцев назад

Изменено 9лет, 5 месяцев назад

Просмотрено 397 раз

У меня есть заголовок и страница (оба в обертках). Страница состоит из левого меню и контента. Я использую div-макет. И я хочу следующее:

Оболочка заголовка и оболочка страницы заполняют всю ширину экрана, но ее содержимое (сами заголовок и страница) находятся в определенных границах ширины (макс. и мин.),
Следующее поведение в случаях широкого и узкого экрана:

широкий экран: все в порядке:

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

Но на самом деле у меня это: после прокрутки вправо я вижу только остальное содержимое, но не его окружение!

Как это исправить и сделать как на второй картинке?

Пример (сузьте окно результатов, чтобы увидеть плохой вариант): http://jsfiddle.net/WxaB3/9/.

HTML:

 
    <дел>
        <дел>
            заголовок