Инструменты пользователя

Инструменты сайта


media_queries

Назад

media queries — часть спецификации CSS3, позволяющая уточнить область действия css-селектора. Представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.

То есть мы можем повлиять на css свойства при разрешении экрана устройства.

Очевидно, что блоки media queries нужно располагать в порядке от меньшего разрешения к большему. Это позволит не извращаться в условиях, да и «интуитивно понятно».

Базовая идея использования медиа запросов
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*Базовый стиль*/
        h1{ font-size: 30pt; }
        p {font-size: 15pt; }   
        /*Запрос для устройств у которых ширина экрана не меньше 1200px*/
        @media screen and (min-width:1200px)
        {
            h1{ font-size: 40pt; }
            p {font-size: 20pt; }
        }
        /*Запрос для устройств у которых ширина экрана не больше 800px*/
        @media screen and (max-width:800px)
        {
            h1{ font-size: 25pt; }
            p {font-size: 12pt; }            
        }
        /*Запрос для устройств у которых ширина экрана не больше 400px*/
        @media screen and (max-width:400px)
        {
            h1 {font-size: 20pt; } 
        }
    </style>
</head>
<body>
    <article>
        <h1>Заголовок</h1>
        <p>
            media queries — часть спецификации CSS3, позволяющая уточнить область действия css-селектора.
            Представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота 
            окна браузера, разрешение, ориентация в пространстве.
        </p>
    </article>
</body>
</html>

Подключение media queries

media queries можно подключать отдельными css файлами.

Первый способ
<style type="text/css">
   @import url(style.css) screen and (max-width:600px);
</style>
Второй способ
<style type="text/css">
   <link rel="stylesheet" href="style.css" media="only screen and (max-width:600px)" />
</style>

Обходные пути для не поддерживающий браузеров

Браузеры не поддерживающие медиазапросы просто отображают обычную страницу с обычными стилями.

Также можно заставить браузеры разбирать медиазаросы с помощью JavaScript. Одними из таких библиотек являются:

  • css3-mediaqueries-js (богатая функциональность)
  • Respond.js (более быстрый, чем предыдущий, поддерживает min/max-width)

Ссылки