Адаптивность css: Делаем адаптивный HTML, добавляя одну строку в CSS / Хабр

20.08.2023 alexxlab

Содержание

Медиазапросы | CSS: Адаптивность сайта

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

Медиазапросы записываются следующим образом:

@media (условия) {
  /* CSS-код, который будет выполнен для данного условия */
}

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

Ориентация экрана

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

landscape. Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
portrait. Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.

<style>
  @media (orientation: landscape) {
    /* При горизонтальной ориентации фоновым цветом сайта будет белый */
    body {
      background: #FFF;
    }
  }
  @media (orientation: portrait) {
    /* При вертикальной ориентации фоновым цветом сайта будет чёрный */
    body {
      background: #000;
    }
  }
</style>

Разрешение экрана

При использовании медиазапросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width

для ширины и height, min-height, max-height для высоты.

С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

<style>
  /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */
  @media (max-width: 1400px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей,
    но больше 990 пикселей.
    Эти стили будут использованы для планшетов и ноутбуков с низким разрешением
    */
  }
  @media (max-width: 990px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей,
    но больше 770 пикселей.
    Эти стили подойдут для некоторых мобильных устройств и планшетов
    */
  }
  @media (max-width: 770px) {
    /*
    Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей.
    Это множество мобильных устройств
    */
  }
</style>

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

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

Стили по умолчанию.
Стили для условия медиазапроса max-width: 1400px.
Стили для условия медиазапроса max-width: 990px.
Стили для условия медиазапроса max-width: 770px.

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений

viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.

В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиазапросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

<style>
  /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */
  @media (min-width: 770px) {
    /*
    Стили для устройств, у которых ширина viewport больше или равно 770 пикселей
    */
  }
  @media (min-width: 990px) {
    /*
    Стили для устройств, у которых ширина viewport
    больше или равно 990 пикселей, но меньше 1400 пикселей.
    */
  }
  @media (min-width: 1400px) {
    /*
    Стили для устройств, у которых ширина viewport
    больше или равно 1400 пикселей
    */
  }
</style>

Логические операторы

Условия внутри медиазапросов можно комбинировать. Для этого существует три логических оператора:

Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and. Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:

<style>
  @media (orientation: portrait) and (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией и шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:

<style>
  @media (orientation: portrait), (min-width: 600px) {
    .container {
      /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not. Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not.

<style>
  @media not all and (orientation: landscape) {
    .container {
      /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */
      width: 100%;
    }
  }
</style>

Использование медиазапросов при подключении CSS

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <title>Подключение CSS файлов</title>
    <!-- Общие стили для проекта -->
    <link rel="stylesheet" href="style.css">
    <!-- Стили для экранов с viewport не менее 750px -->
    <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">
</head>
<body>
    <!-- Разметка проекта -->

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

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

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

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

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

Адаптивность — CSS Framework — Русская поддержка Invision Community

CSS фреймворк IPS4 является адаптивным, то есть элементы адаптируются в зависимости от размера экрана пользователя.

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

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

Классы адаптивности, которые есть в IPS4, позволяют вам контролировать подобное поведение элементов.

Адаптивные размеры, используемые в IPS4

В рамках медиа-запросов, контролирующих адаптивность, существуют следующие размеры экранов:

Телефоны — до 767 пикселей в ширину.
Планшеты — между 768 пикселей и 979 пикселей в ширину.
Настольные компьютеры — 980 пикселей и шире.

Основной функционал показать/скрыть

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

Эти классы:

ipsResponsive_hidePhone
ipsResponsive_hideTablet
ipsResponsive_hideDesktop
ipsResponsive_showPhone
ipsResponsive_showTablet
ipsResponsive_showDesktop

Вы можете комбинировать их, если хотите. Например:

<div>
  Данный элемент *не будет* отображаться на телефонах или планшетах, но *будет* на настольных компьютерах
</div>

Дополнительные классы для управления отображением элементов

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

ipsResponsive_block
ipsResponsive_inlineBlock
ipsResponsive_inline

<div>
  Этот элемент будет отображаться *только* на размерах экрана настольного компьютера, и будет отображаться как блочный элемент.
</div>

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

Report Документ

Учебное пособие по адаптивному дизайну | 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 только экран и (минимальная ширина: 401px) и (максимальная ширина: 960px) {
  тело {
    цвет фона: #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 элемент несколькими пустыми полями. В каждой коробке есть изображение, так что мы можем различить их немного легче.