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

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

Допустим у нас есть блок с таким оформлением

.block {
     width:200px;
     height:200px;
     background:cornflowerblue;
}

Мы хотим чтобы при сужении блок поменял цвет. Для этого добавим в код media-запрос

.block {
     width:200px;
     height:200px;
     background:cornflowerblue;
}

@media (max-width:800px) {
     .block {
         background:red;
     }
}

то есть наш media-запрос не будет работать пока ширина экрана не станет меньше 800. Когда media-запрос выполнился, для браузера наш css будет выглядеть следующим образом.

.block {
     width:200px;
     height:200px;
     background:cornflowerblue;
}

.block {
    background:red;
}

Мы можем усложнить условия media-запросов

Логическое И

Допустим мы хотим, чтобы в нашем примере блок при ширине окна от 900px до 1000px был фиолетовым. Для этого нам нужно добавить еще один media-запрос. Да в одном файле может быть сколько угодно media-запросов!

Посколько у нас два условия: ширина окна должна быть больше 900px и меньше 1000px - нам понадобится логическое "И". Чтобы задать оператор "И" в выражении нужно использовать слово and

.block {
     width:200px;
     height:200px;
     background:cornflowerblue;
}

@media (max-width:800px) {
     .block {
         background:red;
     }
}

@media (min-width:900px) and (max-width:1000px) {
     .block {
         background:red;
     }
}

ИЛИ

Иногда нужное нам оформление должно работать в двух разнородных промежутках. Чтобы объединить промежутки мы можем использовать оператор "ИЛИ". В media-запросе используется запятая.

Условие ниже будет срабатывать если ширина окна меньше 600px и больше 800px

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Усложнение конструкций

Внутри одного media-запроса может быть сколько угодно CSS-селекторов.


@media (min-width:800px) {
     :root {
          color:black;
     }

     .block {
          width:100px;
     }
}

Подключение через link

Мы можем писать media-запросы непосредственно в теге link при подключении css-файлов. Но такой подход заставит нас разбивать наш css на множество файлов

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

Различные типы устройств

braille – Для устройств системы Брайля для слепых людей. (Пример 1 | Пример 2)

embossed – Для идеи будущего, известной как выпуклые экраны. (Патент | Экспериментирование)

handheld – Для телефонов, карманных компьютеров и других небольших устройств.

print – Для принтеров.

projection – Для мелко- и крупномасштабных проекторов.

screen – Наиболее распространенный тип. Для всех устройств, имеющих экраны.

speech – Для устройств, воспроизводящих речь. (Пример)

tty – Для телекоммуникационных устройств для глухих. (Пример)

tv – Для телевизоров.

Например мы можем задать особенное оформление для сайта при печати

@media print {

}

Или даже отдельное оформление для цветного принтера

@media (max-color: 4) {
     body {
          background-image: none;
     }
}

Учет плотности пикселей на устройстве

@media print and (min-resolution: 300dpi) { ... }

Адаптивные картинки

Полезное чтиво:

1.https://proglib.io/p/responsive-images/

  1. http://www.html5rocks.com/en/tutorials/responsive/picture-element/

  2. https://developer.mozilla.org/en/docs/Web/HTML/Element/picture

CSS-шлюзы

https://habrahabr.ru/company/mailru/blog/315196/

Полезное чтиво:

  1. PX, EM or REM Media Queries? http://zellwk.com/blog/media-query-units/

  2. Managing Media Queries https://medium.com/@AshConnolly/managing-media-queries-ac2205d1a926#.z21akyckz

  3. Очень хороший обзор различных возможностей media-запросов https://webformyself.com/media-zaprosy-obzor-razlichnyx-vozmozhnostej/

  4. Подстраиваем сайт под ночной режим https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode

  5. Выбор цветов для темной темы https://vc.ru/design/52140-darkmode

Практика:

  1. Изменение цвета блока при сужении
  2. Делаем несколько промежутков. В каждом промежутке блок принимает свой цвет.
  3. Изменение фоновой фотографии с горизонтальной на вертикальную при сужении
  4. Меняем горизонтальное меню на вертикальное при сужении
  5. Есть боковая колонка и блок контента. При сужении боковая панель должна переместиться на верх шаблона сайдбар, контент
    хедер, контент
  6. Предыдущее задание, но боковая панель находится справа.
  7. Горизонтальное меню превращается в иконку. При наведении на иконку должно появляться меню.
  8. Три коллонки. Одна фиксированная. Две резиновые. У одной из резиновых есть min-width. Добиться, чтобы при любом разрешении сумма ширин колонок была 100%.
  9. Многоколоночная адаптивная галерея. Сначала у нас 4-ре колонки, потом три, потом две, потом одна. Все фотографии должны отображаться на весь экран.
  10. Создание адаптивного шаблона

results matching ""

    No results matching ""