CSS3 Media Queries становится официальной рекомендацией W3C
01.09.2018
CSS3 Media Queries
CSS3 Media Queries модуль был выпущен в качестве официальной рекомендации W3C от 19 июня 2012 года, по случаю окончания цикла разработки, которая началась более десяти лет назад (первый рабочий проект спецификации был опубликован 4 апреля 2001 года).
Стандарт CSS3 Media Queries - позволяет создавать дизайн веб-проектов, адаптированных к различным устройствам, таким как персональные компьютеры, планшеты, мобильные телефоны. Отображение веб-сайта происходит по-разному в зависимости от размера экрана или соотношение сторон устройства. Данная инновационная разработка стала одной из самых обсуждаемых тем в области CSS3 в последние месяцы, так как концепция реагирующего дизайна постоянно набирает обороты, в основном в результате быстрого роста числа различных устройств (и различных разрешений экранов), на которых пользователи могут заходить в Сеть (смартфоны, планшеты и даже современные телевизоры).Для использования CSS3 Media Queries необходимо создать и подключить новый css файл:
<link href="queries.css" rel="stylesheet">В данном файле необходимо прописывать стили, которые будут менять размеры контейнеров, в зависимости от разрешения экрана:
@media (min-width: 768px) and (max-width: 979px) { .container { width: 760px; } }
Конечно, если у вас изначально резиновая верстка, то ширину контейнеров необходимо задавать в процентах, как и все отступы, размеры шрифтов и т.д.
Демонстрацию возможностей CSS3 Media Queries можно посмотреть на сайте Microsoft . Чтобы увидеть, как изменяются размеры блоков, просто измените размер окна своего браузера!