Адаптивный сайт css: Что менять в HTML и CSS коде

Адаптивная верстка сайтов: обзор подходов и CSS фреймворков

Предисловие

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

О статье

Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.

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

Виды версток

Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.

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

Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:

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

Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:

Адаптивная верстка

Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.

Отзывчивая верстка

Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.

Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.

Основные техники реализации сайтов под любое разрешение

Относительные значения

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

Относительные значения для размеров и отступов

Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).

Ниже приводится пример задания ширины равной 90% от размера родительского компонента.

При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:

• vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
• vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
• vmin — выбирается наименьшее из vw и vh;
• vmax — выбирается наибольшее из vw и vh.

Ниже рассмотрен пример использования vw и vh

. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.

Относительные значения для размера шрифта

Существуют следующие относительные значения для шрифтов:

• em — задаёт размер относительно шрифта родителя;
• rem — задаёт размер относительно шрифта <html>.

Рассмотрим пример:

Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px

(20px * 1.5 = 30px).

Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.

Максимальные и минимальные размеры компонентов

Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.

Рассмотрим пример:

Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.

Использование медиа-запросов

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

С помощью медиа-запросов можно задать стили для следующих типов устройств:

• all — все типы (значение используется по умолчанию)
• braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
• embossed — принтеры, использующие для печати систему Брайля
• handheld — смартфоны и аналогичные им аппараты
• print — принтеры и другие печатающие устройства
• projection — проекторы
• screen — экран монитора
• speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
• tty — устройства с фиксированным размером символов
• tv — телевизоры.

Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.

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

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

• Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
• Адаптивная вёрстка: что это и как использовать
• Адаптивный и мобильный дизайн с CSS3 Media Queries
• Адаптивные изображения в CSS
• Техники адаптивной типографской разметки текста

CSS-фреймворки

CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.

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

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

Как и библиотеки скриптовых языков программирования,

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

Рассмотрим самые популярные CSS-фреймворки.

Bootstrap

Официальный сайт:
http://getbootstrap.com/

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.

Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:

В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.

Отличительные черты:

• 12 — колоночная сетка
• Большое количество готовых для использования компонентов
• Поддержка Less и Sass
• Использование Normalize.css.

Material Design for Bootstrap

Официальный сайт:
https://fezvrasta.github.io/bootstrap-material-design/

Material Design for Bootstrap

— это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.

Отличительные черты:

• 12 — колоночная сетка
• Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.

Materialize

Официальный сайт:
http://materializecss.com/

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

Отличительные черты:

• 12 — колоночная сетка
• Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
• Поддержка Sass.

Bulma

Официальный сайт:
http://bulma.io/

Bulma — современный CSS-фреймворк основанный на новом способе отображения

Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.

Отличительные черты:

• Использование Flexbox вместо колоночной сетки
• Большое количество готовых для использования компонентов
• Поддержка Sass
• Не используются JS-файлы

Pure

Официальный сайт:
https://purecss.io/

Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.

Отличительные черты:

• 24 — колоночная сетка
• Модульный фреймворк
• Не используются JS-файлы
• Использование Normalize. css
• Минимальное количество готовых компонентов и стилей.

Заключение

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

примеры тем, основы и советы по CSS

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

Так, с ежедневным ростом количества обладателей мобильных телефонов, повышается и необходимость отзывчивого (адаптивного) дизайна. И сегодня мы поговорим о том, как же его можно применить для сайтов WordPress.

Смотрите также:

• Адаптивные темы WordPress: единый сайт для всех устройств
• Как адаптировать контент для темы WordPress с адаптивной версткой
• Понимание принципа работы изображений на WordPress (для адаптивного дизайна)
• Как создавать адаптивные веб-макеты для разных устройств на WordPress
• 22 бесплатные адаптивные темы WordPress для блога или личного сайта

Что представляет собой адаптивный дизайн?

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

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

Примеры адаптивного дизайна

Тема Divi 2.0

Не нужно далеко ходить. И на WordPress есть отличный пример качественного отзывчивого дизайна – тема Divi 2.0. Просто откройте эту тему на мобильном устройстве. Она сразу же приобретет ширину экрана и компактно отобразить все элементы дизайна в читабельном виде. А вот как поведет себя тема, если вы будете изменять размеры окна браузера на своем компьютере:

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

Эти изменения условно называются CSS media query – это заявление в таблице стилей, которое используется для вызова других заявлений и основано на размере экрана того устройства, под которое создается адаптивный дизайн.

Чем меньше его ширина, тем больше сайт оптимизирован под мобильные устройства типа iPhone или Android.

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

Сайт Time.com

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

Как можно расширять свои знания об адаптивном дизайне?

Тестирование ранее посещаемых сайтов

Если тестировать все посещаемые сайты на разных устройствах, то через некоторое время это войдет в привычку. Некоторые сайты абсолютно по-разному выводятся на экран на разных устройствах. Например, Google использует абсолютно отличающиеся таблицы стилей в зависимости от ширины экрана устройства. Такой метод требует дополнительного кода CSS помимо стандартного CSS, и применяется еще и на таких крупных сайтах, как Google, Amazon, Yahoo.

Другие методы

Также в самообразовании в сфере отзывчивого дизайна поможет:

• Чтение тематических блогов и руководств
• Прохождение курсов
• Посещение воркшопов
• Пополнение знаний о CSS3 и использовании Media Queries
• Самостоятельное внедрение знаний на практике
• Создание, пусть и простого, сайта с помощью основ HTML и CSS для понимания принципа их работы.

Как сделать сайт на WordPress отзывчивым?

Ну вот, самая интересная часть поста. Для создания адаптивной версии сайта на WordPress необходимо использовать CSS3 Media queries, о которых сегодня уже упоминалось.

Стандартное media-query-заявление выглядит таким образом:

@media (max-width: 700px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

С помощью правила @media для веб-сайта можно создать разные шаблоны под различные виды экранов, версию для печати, мобильного телефона или же планшета. Можно использовать сразу же несколько видов и определить любую нужную ширину, использовав media query.

В коде есть элемент @media с ограничением (max-width: 700px) и это значит, что если разрешение экрана или окно браузера достигает 700 пикселей или меньше, то применяются параметры, указанные в скобках.

Лучше конечно использовать эти правила @media без фанатизма и по-меньше.

Пример

Для демо версии будут использованы основы HTML и CSS, чтоб показать на примере, как создаются правила адаптивного дизайна внутри кода. Этот же метод используется и для сайта на WordPress. Нужно только применить стили в файле style.css, чтобы изменить дизайн сайта.

Код HTML

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Elegant Themes Responsive Web Design - Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
        <h2>Responsive Web Design</h2>
            <ul>
                <li><a href="#">Sample Link 1</a></li>
                <li><a href="#">Sample Link 2</a></li>
                <li><a href="#">Sample Link 3</a></li>
                <li><a href="#">Sample Link 4</a></li>
                <li><a href="#">Sample Link 5</a></li>
            </ul>
        </div>
    </body>
</html>

Выше приведен пример стандартного кода. Мета-тег viewport используется для того, чтобы заявить браузеру о выведении кода в соответствии с шириной экрана девайса. Часть кода div содержит ссылки.

Вот как отображается страница в Chrome:

Конечно же, мы не можем оставить ее в таком виде, и используем CSS.

Код CSS

body {
    background: PowderBlue;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
.container {
    width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: white;
}
.container h2 {
    text-align: center;
}
.container ul {
    list-style-type: none;
}
.container ul li {
    display: inline-block;
    padding: 10px 20px;
}
.container ul li a {
    display:block;
    padding: 20px;
    background: Tomato;
    border-radius: 4px;
    color: black;
    text-decoration: none;
}
. container ul li a:hover {
    background: black;
    color: white;
}

После применения стиля страница выглядит уже вот так:

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

Что же тогда делать?

Необходимо использовать media query, что поможет подстроить страницу под изменения в CSS. Для этого нужно добавить нижеуказанный код CSS в низ файла style.css.

@media (max-width: 970px) {

.container {
    width: 100%;
    margin: 0 auto;
    padding:20px 0;
}
.container ul {
    padding:10px;
}
.container ul li {
    display:block;
    padding:10px 0;
}
}

Теперь, когда код добавлен, можно изменить размер окна браузера, чтобы увидеть эффект адаптивности:

Отлично! Можно настроить еще несколько элементов, как только браузер приобретет минимальную ширину. А использование media query поможет улучшить результат. Добавьте эту часть внизу файла style.css:

@media (max-width: 480px) {
    .container h2 {
        font-size: 22px;
    }

}

Понемногу дизайн приблизился к желаемому конечному виду. Правда уже лучше?

Теперь адаптивный дизайн полностью готов. Этот принцип можно использовать для любого сайта, независимо от CMS.

Обработка изображений

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

Но общее решение состоит в том, чтобы задавать изображениям максимальную ширину – 100%. А именно вот так:

img {
  max-width:100%;
}

Вот как отображается графика на сайте после применения этого решения:

Читабельность

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

Юзабилити

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

Темы

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

Заключение

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

Источник: elegantthemes.com

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Руководство по внедрению CSS-колонок в адаптивный дизайн — CSS-LIVE

Следующяя статья написана приглашённым автором Кэти Декора (под редакцией Джеймса Моррисона). Кэти исследовала колонки CSS и их отзывчивость в работе. Но, к сожалению, она не смогла найти много информации на эту тему. Поэтому, как истинный герой, она написала об этом сама. Давай, Кэти:

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

Где объявлять стили колонок

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

На картинке ниже, на левой стороне изображены правила CSS-columns, применённые ко второму абзацу, преобразуя его содержимое в колонки. На правой стороне изображены правила, добавленные к элементу-контейнеру, такому как <div></div> или <article></article>, чтобы преобразовать его в многоколоночный макет.

Какие объявления колонок существуют

Объявить колонки можно тремя разными способами:

1. При помощи свойства column-count.
2. Через column-width.
3. С помощью обоих свойств (рекомендуется).

Давайте поближе познакомимся с разными способами объявления колонок.

1. Объявление column-count

Используем column-count для объявления количества колонок.

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

Живой пример

Число колонок остаётся неизменным даже тогда, когда меняется ширина браузера, как продемонстрировано на гиф-изображении ниже.

2. Объявление column-width

Используйте свойство column-width, чтобы выставить ширину колонкам.

Установленное значение свойства column-width не является абсолютным, скорее оно является минимальной шириной. Установив column-width, браузер определит сколько колонок с шириной не ниже заданной может поместиться в свободном пространстве. Браузер так же учтет в этот рассчёт внутренние отступы, а так же внешние интервалы между колонками (подробнее об этом чуть позже). Затем браузер расширит каждую колонку, распределив равномерно оставшуюся после всех вычислений лишнюю область контейнера.;

Например, если вы внимательно посмотрите на абзац в живом примере ниже, вы обнаружите, что ширина каждой колонки на самом деле больше чем 150пк, выставленных в свойстве column-width.

article {
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
}

Живой пример

Если браузер не сможет вместить по меньшей мере две колонки с такой же шириной как в column-width, тогда браузер переформирует колонки таким образом, чтобы в итоге макет стал одноколоночным.

Гиф-изображение ниже демонстрирует как ведут себя колонки, когда сужается ширина браузера. Кстати, в отличие от свойства column-count, column-width ведёт себя вполне отзывчиво.

3. Объявление двух свойств одновременно (рекомендуется)

Используйте column-count и column-width вместе для лучшего контроля над колонками CSS. Вы можете объявлять каждое свойство в отдельности либо использовать сокращенное свойство columns.

Когда оба свойства объявлены, column-count определяет максимальное число колонок, а column-width — минимальную ширину каждой из них.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
}

/* or */

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
}

Живой пример

На гиф-изображении ниже демонстрируется, как использование column-count и column-width вместе ведёт себя при сужении ширины браузера.

Настройка колонок

Для настройки CSS-колонок существует несколько следующих свойств.

column-gap

Чтобы регулировать интервал между колонками используйте column-gap.

Для большинства браузеров дефолтное значение свойства column-gap равно 1em. Вы же можете выставить своё значение при условии, что оно будет не меньше нуля.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

Живой пример

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

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

column-rule

Чтобы добавить вертикальные линии между колонками, используйте свойство column-rule.

Это свойство является сокращением для column-rule-width, column-rule-style и column-rule-color. Оно строится по той же структуре, что и свойство border.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
}

Живой пример

Как и в случае сcolumn-gap, вертикальные линии исчезнут, если ширина браузера будет слишком узкая. Это можно увидеть на изображении ниже.

column-span

Чтобы прервать текущий поток колонки, используйте, применяйте свойство column-span для дочерних элементов. На время написания статьи Firefox не поддерживал это свойство (но вы можете пойти и проголосовать за этот баг на Bugzilla).

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

Чтобы прервать поток колонки на заголовке, добавьте column-span: all для последнего. Это объявление приостановит поток колонок, позволив элементу охватить их все, а потом заново начнет строить колонки со следующего элемента.

h4 { 
  -webkit-column-span: all; 
          column-span: all; 
}

Живой пример

column-fill

Чтобы изменить механизм заполнения колонок содержимым, используйте column-fill. В настоящий момент это свойство поддерживается только в Firefox.

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

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

В Firefox вы можете изменить это поведение, установив column-fill: auto. Благодаря этому правилу содержимое колонок в Firefox будет заполняться последовательно. Это можно увидеть в живом примере ниже.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
  height: 350px;
}

Живой пример

Поскольку для работы column-fill в Firefox обязательно должна быть установлена высота, то последняя будет вынуждена испортить резиновый дизайн. Содержимому придётся увеличиваться по горизонтали, т.к. оно не может «растекаться» вертикально из-за ограничения высоты. Это поведение продемонстрировано на гиф-изображении ниже. В этом случае на помощь могут придти медиа-выражения, добавленные для управления высотой (об этом немного позже)

Браузеры, не поддерживающие свойство column-fill, при установке высоты для элемента-контейнера колонок, будут заполнять колонки содержимым последовательно. Но стоит отметить, что когда любому элементу-контейнеру колонок установлена принудительная высота, то независимо от браузера или от использования column-fill, эта высота всё равно испортит резиновый дизайн.

Ограничения

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

Переполнение содержимого по горизонтали

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

Возможное решение: создать медиа-запрос с с функцией min-width и написать в нём правило для высоты.

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

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
}
@media (min-width: 500px) {
  article {
    height: 350px;
  }
}

Живой пример

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

Колонки становятся выше чем область просмотра

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

Возможное решение: создать медиа-запрос с функцией min-height, чтобы активизировать колонки.

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

@media (min-height: 400px) {
  article {
    -webkit-columns: 2 350px;
       -moz-columns: 2 350px;
            columns: 2 350px;
  }
}

Живой пример

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

Поддержка браузерами

CSS-колонки имеют приличную поддержку браузерами (IE10+), но всё ещё требуют префиксы для всех свойств. Узнать больше подробностей о соответствующих свойствах можно на Can I Use.

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

Многоколоночный макет не может сломаться, он может только стать одно-колоночным.

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

Учебное пособие по адаптивному дизайну | HTML & CSS Is Hard

№ 10. HTML & CSS Is Hard

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

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

Адаптивный дизайн достигается с помощью «медиа-запросов» CSS. Думайте о медиа-запросах как о способе условного применения правил CSS. Они рассказывают браузер, что он должен игнорировать или применять определенные правила в зависимости от устройство пользователя.

Медиа-запросы позволяют отображать один и тот же HTML-контент в виде различных макетов CSS. Таким образом, вместо того, чтобы поддерживать один веб-сайт для смартфонов и полностью несвязанный сайт для ноутбуков/настольных компьютеров, мы можем использовать ту же HTML-разметку (и веб-сайт сервер) для них обоих. Это означает, что всякий раз, когда мы добавляем новую статью или редактируем опечатка в нашем HTML, эти изменения автоматически отражаются как на мобильных и широкоэкранные макеты. Этот — причина, по которой мы разделяемся содержание из презентации.

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

Настройка

Создать новый проект под названием responsive-design и новый файл под названием отзывчивый.html . Это самая пустая веб-страница, которая у нас была. увидеть через некоторое время, но это поможет нам продемонстрировать что-то очень важное в следующий раздел:

 

  <голова>
    <метакодировка='UTF-8'/>
    
    
  
  <тело>
    
  

 

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

CSS Media Queries

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

Давайте различать узкие, средние и широкие макеты по создание нового styles.css таблица стилей и добавление следующего:

 * {
  маржа: 0;
  заполнение: 0;
  box-sizing: граница-коробка;
}
/* Мобильные стили */
Только экран @media и (максимальная ширина: 400 пикселей) {
  тело {
    цвет фона: #F09A9D; /* Красный */
  }
}
/* Табличные стили */
Только экран @media и (минимальная ширина: 401 пиксель) и (максимальная ширина: 960 пикселей) {
  тело {
    цвет фона: #F5CF8E; /* Желтый */
  }
}
/* Стили рабочего стола */
Только экран @media и (минимальная ширина: 961px) {
  тело {
    цвет фона: #B2D6FF; /* Синий */
  }
}
 

При изменении размера окна браузера вы должны увидеть три разных фона. цвета: синий, если ширина больше 960px , желтый, если это между 401px и 960px , и красный, когда это меньше, чем 400px .

Медиазапросы всегда начинаются с @media «at-rule», за которым следует какое-то условное утверждение, а затем какие-то фигурные скобки. Внутри фигурных скобок вы помещаете кучу обычного CSS правила. Браузер обращает внимание на эти правила, только если условие встретились.

Только экран «тип носителя» означает, что содержащиеся стили следует применять только к устройствам с экранами (в отличие от печатные документы, например, когда вы нажимаете Cmd+P в браузере). min-width и max-width части называются функции», и они указывают размеры устройства, которое вы таргетинг.

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

Итак, @media — это то, как мы определяем различные макеты для конкретных ширины устройства, но какие макеты мы на самом деле пытаемся реализовать? Пример веб-страницы для этой главы будет выглядеть примерно так:

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

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

• «Гибкий» макет — это макет, который растягивается и сжимается для заполнения ширина экрана, точно так же, как гибкие коробки, которые мы рассмотрено несколько глав назад.
• Макет «фиксированной ширины» противоположен: он имеет то же самое ширина независимо от размеров экрана (мы создали один из них в Селекторы CSS глава).

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

Выбор точек останова

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

Гибкие макеты позволяют ориентироваться на диапазон ширины экрана вместо конкретных мобильных устройств. Это очень важно для веб-дизайнеров. Когда они задались целью создать мобильную верстку, они не пытаются что-то сделать который хорошо смотрится на iPhone 6s, Galaxy S7 или iPad mini — они разработка гибкого макета, который хорошо выглядит в любом месте между 300 пикселями и 500 пикселей (или что-то еще).

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

Mobile-First Development

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

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

 <дел>
  <дел>
  <дел>