понедельник, 22 июня 2015 г.

Конспект курса Responsive Web Design Fundamentals by Udacity, week 3, часть 1. User Interaction

Disclaimer. Пост писался в неустойчивом эмоциональном состоянии, возможны опечатки и описки.

В отзывчивом дизайне применяемый CSS зависит от характеристик физического устройства. Существует три способа применять CSS выборочно.

Media queries - самый простой

Что бы сказала о надписи внизу ваша учительница английского? :)
Media queries - штука, позволяющая применять CSS на основе характеристик устройства, таких как ширина, высота или Device Pixel Ratio (что это такое, см. в предыдущем посте). Можно изменять все, в том числе background изображение и всю разметку. Достаточно включить отдельную CSS таблицу... CSS таблицу... черт, это же масло масляное... с media queries.


Такая запись означает, что данный stylesheet применяется только в случае, если ширина экрана превышает 500 пикселей.
Дальше Пит добавляет в этом stylesheet правило для голубого фона, растягивает окно браузера и, как только оно становится больше 500 пикселей, цвет фона меняется на голубой. Мэджик!

Кроме этого , media queries могут быть встроены через теги @import (сильно ухудшает перформанс) или @media.
Пример Пита:

      @media screen and (max-width: 400px) {
       body {background-color:red;}
      }
      
@media screen and (min-width: 401px) and (max-width:599px) {
       body {background-color:green;}
      }
       @media screen and (min-width: 401px) and (max-width: 599px) {
      body {background-color:green;}
      }

Max-width и min-width

Max-width применяются (в смысле - срабатывают) в тех случаях, когда viewport меньше, чем значение, указанное в правиле (value). Не путать с min-device-width, что означает ширину экрана, но никак не окна браузера, из-за чего сайт будет отображаться некорректно на устройствах, где можно изменять размер окна (например, на десктопах). К тому же некоторые устройства порой рапортуют это свойство неправильно.

Изменение верстки

Понятно, что с помощью такого механизма можно изменять не только оформление страницы, но и всю верстку (layout). Точки, в которых верстка изменяется, называются breakpoints.

Комментариев нет:

Отправка комментария