4 простых способа реализации адаптивной сеточной разметки


Содержание

Адаптивная верстка: что это и как использовать

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

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

Регулировка разрешения экрана

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

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Частичное решение: делаем все гибким

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

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

Весь дизайн — микс адаптивных слоев, картинок и, в некоторых местах, умной разметки. Создание адаптивных слоев — частая практика, чего нельзя сказать об адаптивных картинках. Однако если они вам нужны, обратите внимание на следующие техники:

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

«КРОК», Воронеж, Иркутск, Краснодар, Москва, Нижний Новгород, Пермь, Самара, Санкт-Петербург, Троицк, Челябинск, от 120 000 до 240 000 ₽

На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

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

Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

Еще один способ: отзывчивые изображения

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

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc :

Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Интересная фича для iPhone

В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta :


Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

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

Медиазапросы CSS3

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

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

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

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

Также значения медиазапросов можно комбинировать:

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

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

К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.

display: none используется для объектов, которые нужно спрятать.

Вот наша разметка:

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

Теперь прячем колонки и показываем ссылки:

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

Гибкие сетки в CSS


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

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

Допустим, вам нужна страница с двумя колонками, одна из которых должна занимать ⅔ ширины окна браузера, а вторая — оставшееся пространство, то есть ⅓ ширины окна. При этом максимально допустимая ширина контейнера, в котором содержатся колонки, — 1180 пикселей. Каким должен быть код HTML и CSS для реализации этой задачи? Приведем пример:

Элемент .container имеет ширину 100%, но с ограничением максимум в 1180 пикселей. Хак для контейнера помогает восстановить потерянную высоту родителя float-элементов. Колонка .column-2-3 имеет ширину, равную ⅔ ширины контейнера. Колонке .column-1-3 , соответственно, задана ширина, равная ⅓ ширины контейнера. Обе колонки «плавающие», сумма их ширин не превышает 100%, и потому они располагаются в одном ряду.

Многоколоночный дизайн и порядок HTML

Когда многоколоночный макет для десктопной версии адаптируется под мобильные устройства средствами CSS, чаще всего все колонки складываются в одну. Если сетка создана на основе свойства float , это означает, что в определенной контрольной точке колонкам нужно задать правило float: none , которое отменяет обтекание. Тогда все колонки разместятся одна под другой.

И здесь может возникнуть проблема с порядком расположения HTML-элементов. Представим, что макет имеет три колонки: левая содержит длинный список рекламы, средняя — основной контент, а правая — ссылки на похожие записи. Когда вы отмените обтекание, левая колонка будет отображаться в самом верху, под ней будет находиться средняя колонка, а в самом низу — правая.

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

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

Цукерберг рекомендует:  Карьера в IT (web)

Если вся эта информация вас запутала, просто запомните, что при создании HTML-документа необходимо соблюдать желаемый порядок следования элементов, рассматривая макет как одноколоночный. Откройте готовый HTML-документ без CSS-стилей в браузере — и вы получите представление о том, в каком порядке будет показан контент пользователю смартфона. Разместите основной контент первым, а уже под ним добавьте блоки со второстепенным содержимым. Не волнуйтесь, для многоколоночной версии макета вы можете поменять колонки местами с помощью CSS.

Настройка box-sizing для всей сетки

Когда мы говорили о проблемах float-элементов, то рассказывали о нежелательном поведении колонок, при котором они переносятся на другую строку. Такое часто случается, если одна из колонок в ряду становится хоть на миллиметр шире, чем положено. Как вы помните, по умолчанию в общую ширину элемента входит ширина его содержимого, а также размеры горизонтальных отступов, границ и полей. И если вы захотите добавить отступы padding либо рамку border по бокам колонок, когда они сами по себе занимают абсолютно всю ширину контейнера, то возникнет нехватка места и одна из колонок «вылетит» из своего ряда вниз.

Но с помощью CSS-свойства box-sizing можно управлять алгоритмом расчета размеров элемента: если задать ему значение border-box , то браузер будет включать отступы и границы в общую ширину. Примените данное свойство к элементам сетки либо вообще ко всем элементам (используя селектор * ), и тогда вы сможете смело добавлять любые отступы и рамки без страха, что верстка «развалится». Не забудьте продублировать правило с префиксами -moz- и -webkit- — некоторые браузеры требуют их.

От фиксированных значений к относительным

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

Допустим, имеется двухколоночный макет. Ширина основного контейнера составляет 960 пикселей. Ширина одной колонки — 600 пикселей, второй — 360 пикселей:

Как правильно перевести эти значения из пикселей в проценты? Для начала займемся основным контейнером и перепишем для него стили таким образом:

Далее, для перевода значений ширины колонок из пикселей в проценты необходимо разделить это значение на значение ширины контейнера (в пикселях), а затем полученное дробное число перевести в проценты, умножив его на 100. В случае с нашим примером мы разделим число 600 на 960, получим 0,625. Умножим результат на 100 и получим 62,5. Это и есть процентное значение, которое мы поставим вместо пиксельного:

Те же самые расчеты проведем для второй колонки: 360 / 960 = 0,375 * 100 = 37,5.

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

Браузер нормально воспринимает дробные значения, несмотря на то, что пиксель не делится, поэтому смело используйте их. В том же Bootstrap можно встретить значения ширины колонок наподобие 33.33333333% и 66.66666667% . Самое главное, помните, что общая ширина всех колонок в одном ряду не должна превышать 100% ни на йоту.

Адаптивные системы сеток

26 августа 2013 | Опубликовано в Веб-дизайн | 3 Комментариев »

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

Skeleton


Skeleton представляет собой набор файлов CSS для веб-дизайнеров, которым необходимо быстро делать макеты. Это б ольше, чем просто система сеток, Skeleton также предусматривает несколько основных функций для решения общих задач веб-страницы, таких, как сброс CSS для нормализации вашего CSS.

Основная цель — внедрять семантическую разметку HTML, используя Cacc Mixins. Начните с прочтения документов и изучения некоторых примеров. Скачать сетку можно здесь.

Simple Grid

Если вы приверженец минимализма, то это то, что вам нужно.

Profound Grid

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

Griddle

Сетки для веб-дизайнеров и веб-сайтов, которые ставят акцент на современные браузеры . Эта система сеток использует смешанные функции — использование усиленных «inline-block» и «box-sizing» свойств и придает разметке новые особенности, что традиционная float разметка не может дать.

Extra Strength Responsive Grids

Сети дополнительной силы реагирования — эта система для вас, если вы чувствуете, что другие системы сеток слишком ограничены и, если вы отдали приоритет адаптивной верстке.

Proportional Grids

Название «Пропорциональные сети» говорит само за себя. Они позволяют использовать фиксированные единицы измерения для блоков, в то время, как колонки будут оставаться изменчивыми.

Dead Simple Grid

Если вы просто хотите несложную адаптивную сетку, то эта сетка для вас, которая имеет только два CSS класса.

Responsive Grid System

Эта сетка дает вам немного больше гибкости по сравнению с другими системами сеток, потому что она дает вам выбор в использовании любого количества столбцов, которые вам нужны. П опрощайтесь с диктаторскими ограничениями 12-колоночных и 16-колоночных систем.

rwdgrid

rwdgrid — адаптивная сетка CSS, которая основана на 960 Grid System.

CSS Smart Grid

CSS Smart Grid опирается на 960 Grid System. Весит всего 1.2KB.

Gridlock

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

Как сделать — сетку для адаптивного изображения

Узнайте, как создать сетку адаптивного изображения.

Сетка адаптивного изображения

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


Создание сетки изображений

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Используйте CSS Flexbox для создания адаптивного макета:

Пример

.row <
display: flex;
flex-wrap: wrap;
padding: 0 4px;
>

/* Create four equal columns that sits next to each other */
.column <
flex: 25%;
max-width: 25%;
padding: 0 4px;
>

.column img <
margin-top: 8px;
vertical-align: middle;
>

/* Responsive layout — makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) <
.column <
flex: 50%;
max-width: 50%;
>
>

/* Responsive layout — makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) <
.column <
flex: 100%;
max-width: 100%;
>
>

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

Совет: Перейдите на наш CSS Flexbox учебник, чтобы узнать больше о гибкий модуль макета коробки.

Адаптивная сетка. Верстка по-новому

Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:

  • выстраиваем колонки для обычных разрешений (например более 960px);
  • для средних разрешений колонки становятся «резиновыми»;
  • для малых экранов сбрасываем float, после чего все ячейки следуют одна под другой.

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

Способ достаточно простой, поэтому получил широкое распространение. Вместе с тем, очевидно, что в нем существуют большие ограничения, связанные с тем, что модель поведения блоков сетки фиксирована и не предполагает более сложной организации, например для средних экранов сделать не только резиновую ширину, но и расположить ячейки попарно «1-2» и «3-4».

После выхода Bootstrap 3, вебмастера столкнулись с новым методом построения сетки (grid). Именно он вызвал массу непонимания, поскольку сломал «старый» вариант без намёка на совместимость.

Впрочем, кому принадлежит авторство этого метода судить сложно: например в UIKit (отличный css-фреймворк) он появился несколько раньше.

Для затравки посмотрите ещё один пример, где собраны 5 примеров с разным поведением сеток. Заметьте, что для обычных мониторов (более 960px) сетки абсолютно идентичные.

HTML-разметка

Разметка такой сетки ничем не отличается от традиционного варианта.

Названия классов, естественно могут быть произвольными. В этом примере


  • .row — контейнер. Ему нужно прописать стили .clearfix, поскольку внутренние блоки будут плавающими.
  • .col — общий класс для одной ячейки. Здесь выставляем float: left и .box_sizing(border-box) (это упростит использование отступов и нужной ширины).
  • w1-4 — класс, где указывается ширина ячейки width: 25%. Удобно считать не в процентах, а в колонках. В данном случае w1-4 говорит, что это 1/4 ширины (1 колонка из 4-х).

Стили определяем так:

В примерах CSS я использую LESS.

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

Типовое поведение сетки

Классы подобные .col.w1-4 определяют типовое поведение сетки. То есть то, как будет выглядеть сетка без условий в @media.

Этот момент важен, поскольку в разных фреймворках (и у разных вебмастеров) за основу берется разная ширина экрана. Я, например, предпочитаю за основу брать именно десктопы с разрешением 960-1140px, а все что ниже — описывать через @media. В том же Bootstrap’е используется mobile first, где основа — малые разрешения мобильников, а для перехода к десктопу следует использовать @media-правила.

То есть класс .col.w1-4 будет работать только для «типового» размера, а для того, чтобы использовать другую ширину экрана необходима модификация стилей.

Цукерберг рекомендует:  Аутентификация через Google

Принципиальное отличие нового подхода в том, что мы не переопределяем «типовой» класс ячейки, а используем новый, который срабатывает только в пределах своего @media-условия.

Классы для breakpoints

Предположим, что у нас есть блоки @media, где задаются условия:

Мы можем задать поведение для средних экранов (tablets) и малых (phones). Соответственно, в каждом из этих условий нужно сделать уникальные классы.

Фактически это те же самые классы, только добавлены постфиксы «-t» и «-p». В Bootstrap’е используются префиксы «.col-xs-», «.col-sm-», «.col-md-», «.col-lg-». В UIKit — «.uk-width-medium-» и «.uk-width-large-». То есть именование классов может быть произвольным.

Исходя из этого, можно задать для каждой ячейки разную ширину с учетом ширины экрана (читай @media-правил).

В этом примере на обычных экранах все ячейки займут по 1/4 ширины. Для tablets все ячейки займут по 1/2 ширины. Для малых экранов (phones) ячейки займут все 100% ширины. См. демо-пример.

Ещё варианты

Данный подход, когда css-класс определяется в пределах @media-условия, может быть использован для разных задач. Например в Semantic UI (один из лучших css-фреймворков), можно задать «tablet.only» или «mobile.only». Аналогично можно придумать «phone-hide» и «tablets-hide» — скрывать ячейку для разного вида устройств.

В этом примере скрываем 2-ю ячейку для мобильников, и 3-ю ячейку для средних экранов.

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

4 простых способа реализации адаптивной сеточной разметки

У многих дизайнеров возникают трудности при создании адаптивных и мобильных версий сайта. Зачастую непонятно, где какие элементы располагать и какого размера они должны быть. В данной статье я хочу показать, что это не так уж и сложно, особенно если использовать в работе модульную сетку. Вообще модульные сетки — это прекрасный инструмент, который помогает дизайнеру сильно упростить работу, а результат сделать более профессиональным, эстетичным и приятным для восприятия. Поскольку на данный момент мониторы работают в разрешениях, начиная с 1024?768 рх и выше, я считаю самой удобной колоночную сетку, так как она идеально для них подходит. Размер каждой колонки составляет 60 рх, а отступы между ними — 20 рх.

Количество колонок можно легко увеличивать и уменьшать, в зависимости от нужного разрешения. Например, если ваша контентная область будет все 1920 рх, то запросто можно прибавить по 6 колонок с обеих сторон. А если 320 рх, то оставить всего 4 колонки.

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

Предлагаю вам рассмотреть пример сайта с разрешением 1920?1080 и контентной частью в 960рх, так как на сегодняшний день они наиболее распространенные.


А вот как он выглядит с наложением сетки и линеек:

Мы видим, что абсолютно все элементы вписываются в сетку. Все четко и правильно, аккуратные ровные столбцы. Единственное, с чем могли возникнуть проблемы — это элементы, которые в примере обозначены звездами. Это могут быть как иконки с текстом, так и фотографии в портфолио, или просто столбцы с текстом. Чтобы правильно рассчитать расстояние, мне не пришлось делать сложных вычислений, вымерять каждый пиксель, плодить не нужные в будущем линейки и так далее. А все потому, что есть сетка. Итак, у меня 4 «звезды» и 12 колонок, следовательно, делим 12 на 4 и получаем по 3 колонки на каждый пункт. То есть центр каждой «звезды» должен располагаться посередине центральной из выделенных на нее колонок.

Но, к примеру, у вас не 4, а 11 таких пунктов. Скорей всего, они не поместятся в контентную часть в один ряд, значит, сделаем 2 ряда — 6 сверху и 5 снизу или наоборот. Берем наши 12 колонок и делим на 6. Получаем подве колонки на пункт, то есть центр каждого пункта будет располагаться посередине промежутка между двумя ее столбцами, прямо на линейке, и так далее. Разрешения меньше 1920 рх (вплоть до 960 рх) разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно, макет просто обрезается с обеих сторон.

Разрешения меньшие 1920 рх вплоть до 960 рх разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно — макет просто обрезается с обеих сторон.

Рассмотрим разрешение 768?1024. Здесь колонок уже 8. Начнем с шапки. Логотип, номер телефона и другие элементы просто сдвигаем к центру, а вот пункты меню у нас уже не постятся, так что само меню лучше сделать всплывающим:

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

Наши «звезды» здесь пришлось переместить. И теперь каждой досталось по 4 колонки, появилась возможность немного раздвинуть текст.

Следующий блок тоже перестроился:

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

Снова все ровно, четко, красиво и вписывается в сетку. Полностью сохранена структура страницы. В меньших разрешениях, вплоть до 480 рх, все делается по тому же принципу, останавливаться на них не стоит. А вот что действительно заслуживает внимания и считается самым сложным — это мобильное разрешение в 320?480 рх, им и займемся. Сокращаем нашу сетку до колонок и формируем шапку. Если логотип слишком большой, можно его немного уменьшить. В своем примере я оставляю все как есть. А вот номер телефона уже не помещается — его можно переместить ниже, убрать во всплывающее меню, а можно как у меня — оставить только кнопку для звонка.

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

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

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

Карту оставляем нетронутой, самое главное — чтобы она в высоту вписывалась в 480 рх. И подвал обычно сложностей не вызывает.

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

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

Адаптивная таблица на чистом CSS

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

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

Первый способ адаптации

Стилизуем все это дело (главным образом нам нужно стилизовать table-wrap).

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом.
Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

Раздали каждому столбцу атрибут data-label, который нам пригодится в будущем.

Задаем базовые стили:


Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело.

Как это исправить? добавляем стили:

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса :before мы присоединяем к левому краю наши дата-атрибуты. Выходит так:

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

Надеюсь, Вам было интересно читать данную информацию. Если да — оцените ее! До скорых встреч)

Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/

Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика :)

9 комментариев на «“Адаптивная таблица на чистом CSS”»

Большое спасибо, не много кастомизировал под свои нужды, и получилось то что нужно, всего Вам доброго!

Пожалуйста! Успехов Вам во всем :)

Добрый день.
Подскажите, как быть с такими таблицами? https://rfs21.ru/top_div_mini_2020.html

Ну по факту так же делать. Не получается?

Это просто охуенно!)

Спасибо, очень полезная фишка. Немного кастомизировал для своего проекта. Благодарность и подписка

Спасибо, большое.
Только вот на IOS (Ipad,Iphone) не работает должным образом. Все выводится по строчно. Как адаптировать в этом случае?
Спасибо.

Система сеток

Мощная система гибких сеток для мобильных устройств, для удобной верстки и расположения элементов любых видов и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и десятков предустановленных классов.

Цукерберг рекомендует:  Типичные ошибки веб-дизайнеров

Как это устроено

Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.

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

Вот небольшое объяснение работы Bootstrap 4:

  • Инструмент для центровки контента сайта. Используйте класс .container для фиксированной ширины или .container-fluid для 100%-ной ширины.
  • Ряды – это обертка для колонок. Каждая колонка имеет горизонтальный padding (называемый gutter) для контроля пространства между колонками. Этот padding (паддинг) влияет на ряды с отрицательным марджином. В этом случае все содержимое ваших колонок будет визуально центрировано внизу с левой стороны.
  • Содержимое должно быть расположено в колонках, и только колонки могут быть расположены в рядах.
  • Благодаря флексбоксу колонки сетки без установленного атрибута «ширина» автоматически получают равную ширину. Например, четыре экземпляра класса .col-sm автоматически (на малых контрольных точках) получат ширину одной колонки = 25%. Подробнее смотрите раздел Автоматическое расположение с помощью колонок.
  • Цифры в наименовании классов колонок показывают, сколько колонок из 12-ти возможных в ряду вы бы хотели использовать. Так, если вы хотите использовать три колонки одной ширины, используйте .col-sm-4 .
  • Ширина колонок width задана в процентах, что позволяет колонкам быть гибкими и изменять размер относительно их родительского элемента.
  • Колонки имеют горизонтальный паддинг padding для создания отступов между отдельными колонками, но вы можете удалить марджины margin из рядов и паддинги padding из колонок, добавив класс .no-gutters в .row .
  • Есть 5 «ярусов» сеток, по одному для каждого «брейкпойнта»: все контрольные точки (экстра маленький), маленький, средний, большой и экстрабольшой.
  • Ярусы сетки основаны на минимальной широте, т.е. они подходят для каждого вышестоящего яруса (т.е., .col-sm-4 подходит для маленьких, средних, больших и XL девайсов).
  • Вы можете использовать предопределенные классы сетки (например .col-4 ) или препроцессоры Sass для создания своей разметки.

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

Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.


Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.

Extra small
.col-
.col-sm- .col-md- .col-lg- .col-xl-
Число колонок 12
Ширина отступа 30px (15px с каждой стороны столбца)
Может быть вложенным Да
Упорядочивание колонок Да

Автоматическое расположение с помощью колонок

Используйте классы колонок со специальными контрольными точками (например, .col-sm-6 ) для легкого расположения колонок без использования явно обозначенных номеров классов.

Равная ширина

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

Адаптивная верстка сайтов | Макет на основе сетки

Продолжаем тему адаптивной верстки. Сегодня речь пойдет об одном из трех китов адаптивной верстки — макете на основе сетки (flexible gridbased layout). Два других – это медиа-запросы и гибкие изображения (flexible images).

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

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

Чтобы применить к веб-странице модульную сетку следует использовать простую формулу пропорциональности:

target / context = result

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

Мы сверстаем его «резиновым». Но вот проблема: как задать ширину обоих блоков? Ведь если прописать ее в пикселях, то они уже не будут резиновыми. Значит, нужно использовать проценты, а не пиксели. Но позвольте, а какие значения писать-то? Все равно ведь нужно от чего-то отталкиваться.

Можно, конечно, прикинуть на глаз: контент занимает примерно 70% от общей ширины страницы, а сайдбар — 30%. Но правильный верстальщик никогда и ничего не прикидывает на глаз. Нам нужен точный размер.

Вот для этого и служит та самая формула пропорциональности. Мы просто берем ширину внутренних блоков и делим ее на общую ширину страницы. Здесь вся страница — это context, а каждый из внутренних блоков, соответственно, target из приведенной выше формулы.

660 / 960 = 0,6875
300 / 960 = 0,3125

Остается только перевести эти данные в проценты. Не сильно заморачиваясь, просто сдвинем запятую на два знака вправо. Получаем:

Вот так вот просто. Однако давайте усложним задачу. Предположим, у нас контентная часть разделена еще на две неравные части. Например, слева узкая колонка с датой статьи и социальными кнопками, расположенными вертикально, а правая колонка широкая, и в ней у нас размещен текст статьи.

Из дизайн-макета мы знаем, что ширина этой узкой колонки 120 пикселей, а широкой 520. Как перевести эти числа в %? Опять же применить формулу пропорции. Но на этот раз мы в качестве context-а используем не всю ширину страницы, а ширину того блока, куда входят эти две колонки, то есть ширину контентной части, которая у нас составляет 660 пикселей. Делим:

120 / 660 = 0,1818
520 / 660 = 0,7878

В процентах получаем соответственно 18,18% и 78,78%

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

.content <
width: 68,75%; /* 660px / 960px */
>

Надеюсь, с этим не возникло сложностей. Поехали дальше!


Макет на основе сетки

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

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

На самом деле таких сервисов сейчас пруд пруди! Еще они называются фреймворки. Выбирай, какой больше понравится. Вот отличная подборка 30 CSS-фреймворков для адаптивного веб-дизайна.

Для чего вообще нужны эти модульные сетки?

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

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

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

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

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

Адаптивная сетка CSS для сайта на Bootstrap

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

Сергей 01.12.2020 2319 3.9 из 5.0 (9)

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

Как это работает?

Адаптивная сетка используется для создания макетов страниц посредством набора строк и столбцов. И, хотя, строки и столбцы это атрибуты таблицы, в сетке используются div’ы с определенными классами.

Вот некоторые особенности сетки, которые описаны в документации Bootstrap:

  • Строки помещаются в контейнеры с классом .container или .container-fluid с фиксированной или 100%-ой шириной соответственно
  • Для обозначении строки используется класс .row . Сколько строк — столько контейнеров с классом .row
  • Внутри строк размещаются столбцы, которые содержат непосредственно контент
  • Столбец обозначется классом, состоящим из трех частей: .col-XX-YY , где XX — обозначение ширины экрана (lg, md, sm, xs); YY — целое число от 1 до 12, которое указывает на ширину столбца (от 1/12 до 1). Например: .col-md-3 указывается для столбца, который займет 25% доступного места (3/12) на экранах с разрешением более 992px
  • Если сумма чисел в классе столбца превышает 12, то все дополнительные контейнеры помещаются на новую строку автоматически

Не пугайтесь, если что-то сейчас непонятно. Ниже рассмотрим все эти особенности на примерах.

Разрешения экранов

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

97px

Телефоны ( .container По ширине экрана 750px 970px 1170px
Префикс для класса ячейки .col-xs- .col-sm- .col-md- .col-lg-
Количество столбцов 12
Ширина столбца Auto
Отступы между ячейками 30px (по 15px с каждой стороны столбца)

Пример: горизонтальное заполнение

Используя набор классов .col-md-* , вы сможете создать сетку, у которой ячейки будут складываться друг под друга на мобильных устройства и и выстраиваться в одну линию на десктопах.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих