Как сделать резиновый контейнер css
Перейти к содержимому

Как сделать резиновый контейнер css

  • автор:

Резиновый div. Div для резиновой верстки

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

div

Для того чтобы получить резиновый div нужно прописать следующий css код:

.container < margin:0 auto;/*Центрирование блока*/ background:#ccc;/*Цвет блока*/ max-width:1280px;/*Максимальная ширина при больших разрешениях*/ min-width:940px;/*Минимальная ширина при маленьких разрешениях*/ width:auto;/*Ширина в зависимости от разрешения экрана*/ >
  • Яндекс кошелек — 410014625168542
  • Webmoney — R429373694729

Гибкие элементы — CSS: Адаптивность сайта

В первом проекте создавалась страница с фиксированной шириной в 1000 пикселей. Такой подход имеет право на жизнь, но что случится, если такой макет открыть на устройстве, разрешение которого меньше 1000 пикселей по ширине? В таком случае появится горизонтальный скролл, который раздражает пользователей.

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

Создадим контейнер с шириной 800 пикселей, добавим немного стилей и текста. Внутри контейнера расположим три блока с шириной 245 пикселей:

В этом примере суммарно блоки занимают 735 пикселей. Представим, что размер страницы изменился и теперь равен 700 пикселей. В этом случае все три блока не вместятся на страницу. Вместо этого появится горизонтальная прокрутка:

Для эмуляции поведения браузера на контейнере используется свойство oveflow-x , которое скроет контент и добавит полосу прокрутки. Думайте о блоке .container как о браузере.

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

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

Такой подход получил название резиновая (fluid) вёрстка.

Сделаем три блока резиновыми. Для этого уберём фиксированную ширину в 245 пикселей и заменим значение на 33%. Таким образом три блока займут почти всё доступное пространство:

Изменяя размер страницы или блока будет меняться и размер блока с резиновой вёрсткой. Эта особенность используется и при создании адаптивного сайта.

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

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

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

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

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

Принципы резиновой верстки

  • Относительные единицы измерения

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

  • Гибкость и адаптивность

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

  • Зависимость от разрешения

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

Преимущества

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

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

SEO: улучшает SEO-показатели, так как все внешние ссылки и сигналы указывают на одну и ту же страницу, а не разные версии.

Основные элементы

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

Медиа-запросы: это инструмент CSS, позволяющий применять разные стили и правила на основе характеристик, таких как ширина экрана.

Примеры кода

Вот пример простого кода резиновой верстки с использованием HTML и CSS:

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

Материал предназначен для дизайнеров и Frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.

С чего все началось

В 2018 мы перешли на реактивные фреймворки. Наш выбор пал в пользу Vue. Мы используем его в наших проектах чаще всего. Нам понравилась экономия времени и сил за счёт компонентного подхода (HTML, CSS, JS в одном файле). Далее мы решили автоматизировать всё, что только можно автоматизировать.

Раньше, когда компания работала на субподряд, к нам приходили макеты от разных веб-студий (мы застали ещё времена макетов в Photoshop). Сетки в этих в макетах были просто ужасны. Например 12 колонок на десктопе, 10 на каких-то промежуточных разрешениях, и 2 колонки на мобильном. Отступы между колонками могли быть абсолютно разными. Всё это сводило нас с ума, потому что каждое новое разрешение — это как вёрстка нового макета. Никакой экономии, никакой выгоды, постоянно нужно доказывать, что это действительно много работы, но нас никто не собирался слушать, потому что макеты и бюджеты уже согласованы.

Как было раньше

Как работает сейчас

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

Например, не понятно, на каких разрешениях дизайнер рисует макет 1440 px и на каких разрешениях переходить на макет 768 px. На 1439 px планшетный макет выглядит плохо. Кроме этого есть и другие базовые разрешения, такие, как 1366 px, 1280 px, 1024 px и т.п. Мы пытаемся делать как-то по своему. В итоге получается цепочка итераций переделок и переработок.

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

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

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

То есть создавая резиновую верстку, разработчик даже перестроение макета перекладывает на браузер, чтобы все расчеты производились на стороне браузера, таким образом разработчик может не тратить время на “лишние” стили.

  • Адаптивная (фиксированная)
  • Масштабируемая
  • Резиновая (называется так потому что тянется, она жидкая, но при этом возвращается в исходное состояние)

Примеры сеток

Вот образец, как обычно рисуются сетки. На 1920px 12 колонок: На 1440px — 10 колонок, на 768px — 6 колонок, на 320px 2 колонки Для нас это плохо. Мы решили уйти от этого. Мы рисуем десятиколоночную сетку. Её легче считать на вёрстке Далее сжимаем ширину Мы видим, что масштабируется только ширина колонок, но не отступы колонок (gutter) и margin по краям. Это не позволяет нам нормально использовать сетку, если просто раскопировать первоначальный вариант и уменьшать ширину макета. Для максимального масштабирования нам нужно, чтобы менялись и gutter и margin, поэтому мы переходим к ручному масштабированию. Для этого мы используем 10 колонок, margin 40px и gutter 30px. Рассчитаем размеры в процентах. Берём за основу макет 1920px. margin 40px займёт: 40 / 1920 = 0,020833333333 = 2,083333% gutter 30px займёт: 30 / 1920 = 0,015625 = 1.5625% Ширина колонок 157px: 157 / 1920 = 0,08177083333 = 8,177083% Для проверки можем сложить все размеры: 10 колонок + 9 gutter + 2 margin (157 * 10) + (30 * 9) + (40 * 2) = 1920px Итак, у нас есть процентные размеры:

  • колонка 8,177083%
  • отступ с краю 2,083333%
  • отступы между колонками 1.5625%

Рассчитаем размеры на макете 1440px:

сетка на 1440px

  • ширина колонки: 1440 * 8,177083% = 117,75px
  • margin: 1440 * 2,083333% = 29,99999px
  • padding: 1440 * 1.5625% = 22,5px

Таким же образом можно рассчитать размеры на все ширины макетов

сетка на 1024px и 768pxсетка на 320px

Как мы видим, наша сетка сохранилась. Она просто уменьшилась относительно ширины макета, ширины канваса.

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

Код для резиновой верстки

Перейдём к практике. Мы используем препроцессор scss и функцию percentage для расчета процентов, чтоб сократить код. Напишем в HTML и CSS следующее: https://codepen.io/danilabr/pen/yLpbxPr

$grid_color: #00f; $grid_margin: percentage(40 / 1920); // 40 / 1920 * 100%; $grid_width: percentage(157 / (1920 - 40 * 2)); $grid_gutter: percentage(30 / (1920 - 40 * 2)); body < position: relative; padding: 50px 0; min-height: 100vh; &.is-grid::after < content: ''; position: absolute; z-index: 1000; top: 0; bottom: 0; opacity: 0.15; left: $grid_margin; right: $grid_margin; background: repeating-linear-gradient(90deg, $grid_color 0, $grid_color $grid_width, transparent $grid_width, transparent $grid_width + $grid_gutter); pointer-events: none; >> 

Эти стили дают возможность сделать так, чтоб по нажатию на определённую клавишу на body добавился класс .is-grid и отобразилась данная сетка. Это позволяет не тратить время на pixelperfect, и в то же время в процессе вёрстки следить, чтобы блоки располагались правильно по сетке.

Ширину колонки $grid_width и отступ между колонками $grid_gutter будем считать не относительно общей ширины 1920px, а за минусом отступов слева и справа $grid_margin:

$grid_width: percentage(157 / (1920 - 40 * 2)); $grid_gutter: percentage(30 / (1920 - 40 * 2));

В стилях у сетки отрезаем слева и справа margin:

left: $grid_margin; right: $grid_margin;

С помощью градиента зацикливаем отрисовку колонок:

background: repeating-linear-gradient(90deg, $grid_color 0, $grid_color $grid_width, transparent $grid_width, transparent $grid_width + $grid_gutter);

Далее добавим обёртку .wrapper, и положим в него элемент .column-item https://codepen.io/danilabr/pen/LYeyXba

.wrapper

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

Добавим декоративные стили для .column-item:

.column-item

Сделаем ширину .column-item равной пяти колонкам. Это можно сделать несколькими способами:

1. Просто измерить ширину 5ти колонок с отступами в макете. Либо сложить ширину колонок руками:

5 колонок * 157px + 4 отступа * 30px = 905px.

(не забываем, что 1920px минус 2 отступа справа и слева по 30px = 1840px).

width: percentage(905 / 1840);

2. То же самое на чистом CSS:

width: calc(905 / 1840 * 100%);

3. Можно сосчитать 905 / 1840 на калькуляторе (так лучше не писать):

width: calc(0,4918478261 * 100%);

4. Либо, если использовать наши переменные:

width: $grid_width * 5 + $grid_gutter * 4;

Результат всех этих вариантов будет одинаковый:

Подключаем mixin mq, или ошибка брейкпоинтов через переменные

Часто Frontend-разработчики используют в качестве брейкпоинтов глобальные переменные в препроцессоре. Например, основные разрешения: 1920px, 1440px, 1024px, 768px и т.д. Но это загоняет разработчика в очень узкие рамки. Бывает, что возникают ситуации, когда у нас есть промежуточное разрешение: например, 905px. На нём часто не влезает текст, например, слишком длинное слово.

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

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

@mixin mq($from, $to: false) < @if $to < @media (min-width: #px) and (max-width: #px) < @content; >> @else < @media (max-width: #px) < @content; >> >

Миксин принимает 2 параметра. Второй — опциональный. Если передаётся только один параметр, то используется подход desktop first, если 2, то mobile first.

Добавим к предыдущему примеру mixin mq и брейкпоинт 768px.

.column-item < … @include mq(767) < width: calc(#* 4 + # * 3 + 5px); > > 

При ширине экрана менее 767px ширина .column-item станет равна 4м колонкам + 5px.

Слайдер с динамической высотой

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

Разрешение экрана более 1280pxРазрешение экрана менее 1280pxРазрешение экрана менее 768px

Два блока в резиновой сетке

Продемонстрируем три варианта вёрстки для размещения двух блоков в сетке. Результат будет одинаковый:

Разрешение экрана более 1024pxРазрешение экрана менее 1024px

1. Первый способ с помощью display: flex; https://codepen.io/danilabr/pen/LYeLWzN

При разрешении менее 768px padding у блоков сделаем резиновым

с помощью padding: percentage(20 / (320 — 7 * 2));

2. Второй способ использует display: grid; https://codepen.io/danilabr/pen/QWagmxg

Grid в принципе позволяет писать меньше кода. Также следует отметить, что в данном случае мы можем использовать резиновый padding у блоков на всех разрешениях экрана, потому что grid делает расчёт процентов для padding от ширины ячейки, а не от всего контейнера, как в предыдущем способе.

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

3. В третьем способе мы полностью отказываемся от media queries. Современный frontend позволяет делать и такое. https://codepen.io/danilabr/pen/wvpejWr

Для этого в html нам пришлось добавить обёртки над тэгом

. Основная логика заключена в следующей строке:
flex: max(482px, (100% / 2 — #));

Здесь используется flex-basis и нативная функция css max. На разрешениях, на которых размер колонок меньше 482px будет использоваться второй параметр функции (100% / 2 — #).

Растягиваются колонки на всю ширину за счёт flex-basis, переносятся на следующую строку за счёт flex-wrap. В данном случае мы все расчёты переносим на сторону браузера.

Итог

В заключение, хочется написать список основных постулатов, которые позволят делать резиновую вёрстку быстро, качественно и надёжно:

  • Как можно больше использовать проценты.
  • Как можно больше использовать формулы автоматического рассчёта размеров.
  • Как можно больше использовать коэффициенты.
  • Как можно больше использовать grid.
  • Искать способы написания меньшего количества стилей, для того, чтобы переложить работу для рассчёта размеров на браузер.
  • Для корректного отображения всех изображений использовать cover или contain.
  • фронтенд
  • резиновая верстка
  • резиновый дизайн
  • резиновый макет
  • грид

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *