Учебник по CSS

ГЛАВНАЯ CSS Введение в CSS Синтаксис CSS Селекторы CSS CSS как сделать CSS-комментарии Цвета CSS CSS-фоны CSS границы CSS поля CSS-заполнение CSS высота/ширина Блочная модель CSS Схема CSS CSS-текст CSS-шрифты CSS-иконки CSS-ссылки CSS-списки CSS-таблицы Отображение CSS Максимальная ширина CSS Позиция CSS CSS Z-индекс CSS переполнение Плавающая CSS Встроенный блок CSS Выравнивание CSS Комбинаторы CSS Псевдокласс CSS CSS-псевдоэлемент Непрозрачность CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS CSS-формы CSS-счетчики CSS макет веб-сайта Единицы CSS Специфика CSS CSS! важно Математические функции CSS

CSS расширенный

CSS закругленные углы Изображения границ CSS CSS-фоны Цвета CSS Цветовые ключевые слова CSS CSS-градиенты CSS-тени Текстовые эффекты CSS Веб-шрифты CSS 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

Введение в задний привод Окно просмотра RWD Представление сетки RWD Медиа-запросы RWD Изображения RWD Видео с задним приводом Рамки RWD Шаблоны RWD

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Отзывчивый веб-дизайн — Медиа-запросы


Что такое медиазапрос?

Медиа-запрос — это метод CSS, представленный в CSS3.

Он использует @mediaправило для включения блока свойств CSS, только если выполняется определенное условие.

Пример

Если окно браузера имеет размер 600 пикселей или меньше, цвет фона будет светло-голубым:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Добавить точку останова

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

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


Рабочий стол

Телефон

Используйте медиа-запрос, чтобы добавить точку останова на 768px:

Пример

Когда экран (окно браузера) становится меньше 768 пикселей, каждый столбец должен иметь ширину 100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}


Всегда проектируйте для мобильных устройств в первую очередь

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

Это означает, что мы должны внести некоторые изменения в наш CSS.

Вместо того, чтобы менять стили, когда ширина становится меньше 768 пикселей, мы должны изменить дизайн, когда ширина становится больше 768 пикселей. Это сделает наш дизайн Mobile First:

Пример

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Еще одна точка останова

Вы можете добавить столько точек останова, сколько захотите.

Мы также вставим точку останова между планшетами и мобильными телефонами.


Рабочий стол

планшет

Телефон

Мы делаем это, добавляя еще один медиа-запрос (на 600 пикселей) и набор новых классов для устройств больше 600 пикселей (но меньше 768 пикселей):

Пример

Обратите внимание, что два набора классов почти идентичны, единственное отличие состоит в имени ( col-и col-s-):

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

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

Пример HTML

Для рабочего стола:

Первый и третий разделы будут занимать по 3 столбца каждый. Средняя часть будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет состоять из 3 столбцов, второй — из 9, а третий раздел будет отображаться под первыми двумя разделами и будет состоять из 12 столбцов:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Типичные точки останова устройства

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

Пример

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Ориентация: Портрет/Пейзаж

Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера.

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

Пример

Веб-страница будет иметь светло-голубой фон, если ориентация находится в ландшафтном режиме:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Скрыть элементы с помощью медиа-запросов

Еще одно распространенное использование медиа-запросов — скрытие элементов на экранах разного размера:

Я буду скрыт на маленьких экранах.

Пример

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Изменить размер шрифта с помощью медиа-запросов

Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на разных размерах экрана:

Переменный размер шрифта.

Пример

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Справочник по CSS @media

Полный обзор всех типов мультимедиа и функций/выражений см. в правиле @media в нашем справочнике по CSS .