Css медиа запросы под все устройства. Медиа-запросы

Интернет

Приветствую вас на своем блоге. Сегодня я хотел бы вам показать, как пишутся в css медиа-запросы и для чего они вообще нужны при создании шаблона.

Немного теории

Итак, для чего они вообще нужны, эти медиа-запросы? Они позволяют изменить стили каким-то элементам при условии изменения ширины окна. Это как с псевдоклассом hover – он применяет стили к элементу, на который наведен курсор. То есть событие – наведение курсора. Медиа-запросы делают то же самое, только для них событие – изменение ширины экрана. Все, я думаю вам понятно.

Как они пишутся

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

@media screen and(max-width: 1000px){ Стили… }

Давайте разберемся подробнее:
@media – собственно, эта приставка в начале и указывает на то, что мы пишем медиа-запрос.
Screen – тип носителя. Тут мы указываем screen, потому что это означает экран монитора (или мобильного устройства). Поскольку мы адаптируем сайт под эти устройства, то нам достаточно указать этот тип, но есть и другие.
And – ключевое логическое слово И. Означает, что после этого идет какое-то условие.
(max-width: 1000px) – само условие. Если ширина окна будет меньше 1000 пикселей, то условие срабатывает и к странице применяются те стили, что будут описаны далее.

Смотрим на примере

Отлично разобраться с медиа-запросами поможет пример. Я создам страницу, которая будет похожа на какую-то статью, и мы ее адаптируем под мобильные устройства. Итак, разметка:

Статья

Текст статьи

Тут мы создали общий контейнер для нашей статьи, вставили в нее картинку, заголовок, а само содержание будет в абзацах. Картинку можно взять любую (я взял достаточно большую). Теперь я применю некоторые стили:

Контейнеру задаем максимальную ширину и центрируем его. Теперь при уменьшении окна не будет сразу же появляться горизонтальный скролл, ведь мы записали максимальную ширину, а не фиксированную.

Картинку уводим влево, а текст будет обтекать ее справа с небольшим отступом. Вот так это у меня выглядит:

Я просто добавил много случайного текста в абзацы, чтобы все было больше похоже на реальную статью. Это внешний вид статьи при ширине примерно 800 пикселей. Сейчас все смотрится вполне неплохо, но давайте мы еще уменьшим ширину окна, до 700 пикселей, например:

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

Важное условие работы! Перед тем, как начинать реализовывать адаптивность, нужно в html в тег head вставить вот такую строчку кода:

Все, теперь все будет работать.

Так, теперь нужно разобраться с тем, как убрать проблему. Собственно, достаточно будет отменить обтекание на ширине от 700 пикселей и меньше и тогда при достижении этой ширины текст сам перенесется под изображение. Также неплохо было бы преобразовать картинку в блок и выровнять ее по центру. Все это делается таким кодом:

@media screen and (max-width: 700px){ img{ float: none; margin: 0 auto; display: block; } }

Вот и все, теперь вот так вот красиво выглядит наша статья на расширении 700 пикселей.

Еще один адаптивный запрос

Но теперь возникает еще одна проблема – при большем уменьшении окна наступит то время, когда картинка просто перестанет влазить в окно и начнет образовываться горизонтальный скролл, что не есть хорошо.

Примерно это начинает происходить на пятистах пикселях, поэтому давайте добавим на этой отметке еще один запрос:

@media screen and (max-width: 500px){ img{ width: 80%; } }

Ширина указывалась мной исходя из того, что изображение имеет небольшие отступы, поэтому задание 100-процентной ширины привело бы к появлению скролла.
Готово. Теперь у нас, по сути, адаптивная страница. Пусть она примитивная, но зато адаптивная.

Откройте ее в браузере и уменьшайте ширину окна. Сначала вы увидите, как отменится обтекание, а потом картинка начнет пропорционально уменьшаться в размерах. И всегда будет так, что содержимое будет полностью влезать в окно. Вот она, сила адаптивности!

Конечно, в этой статье я привел вам самые простые примеры, но они очень важны для понимания того, как это вообще работает. На этом у меня все, в будущем постараюсь написать еще пару статей на эту тему.

В каких браузерах работает? Для чего используется?

Как уже известно из спецификации CSS, особый стиль оформления можно создавать для отдельного типа устройства. С выходом спецификаций версии CSS3 стало возможно еще корректировать оформление в зависимости от технических возможностей этих самых устройств. В качестве примера, можно вычислить девайс, у которого максимальное разрешение экрана 640 пикселей и составить для него отдельную таблицу стилей, а для прочих устройств можно с генерировать свое оформление. Кроме этого с легкостью можно определять такие показатели, как монохромность экрана, ориентации страниц при выводе и прочие полезные характеристики. Также стоит отметить, что все эти параметры можно кооперировать. Таким образом мы можем определить уникальный стиль для устройства, у которого определенное разрешение и ориентация страниц.

Полагаясь на все эти достоинства CSS3, стало возможным создавать адаптивные ресурсы, которые гармонично будут отображаться при любых условиях и определенных индивидуальных технических характеристах. Так, при уменьшении ширины окна браузера или экрана можно переопределять число колонок на сайте или размеры ключевых блоков, подгоняя их под нужные габариты.

Как правильно задавать?

Ключевая характеристика медиа-запроса - это правило , с него необходимо начинать все запросы. После него указывают определенный тип устройства, для которого составляется оформление. За этим следует указание логического оператора и медиа-функции. Разновидность типов носителей, через которые может выводится информация, представлены ниже:

Носитель Пояснение
all Соответствует всем возможным носителям. Это значения установлено по умолчанию
braille Носитель, который работает по принципу Брайля. Такие устройства предназначены для людей, которые не видят.
embossed Принтеры, которые осуществляют печать информации по принципу Брайля (предназначено для людей с ограниченным зрением).
handheld Соответствует КПК и похожим устройствам.
print Печатающие устройства.
projection Проектор.
screen Монитор.
speech Устройство, которое считывает информацию и преобразует ее в голосовой формат. В качестве примера выступает речевой браузер.
tty Устройства, у которых прописан стандартный размер символов и дисплеев (к примеру, телетайп).
tv Телевизор.
Логические операторы с примерами использования в коде

Союз, который предназначен для объединения разных условий. Его логическое значение - "и" . Ниже представлен пример, который формирует стилевое оформление для цветных носителей.

@ media all and (color) { ... }

Частица, которая противоречит определенному условию или событию. В нижнем примере записан запрос на применение стиля ко всем существующим девайсам за исключением смартфонов

@ media all and (not handheld) { ... }

Стоит отметить, что данный оператор имеет не высокий приоритет считывания, поэтому он принимается во внимание системой в последний момент.

Применение этого оператора рассчитано на оптимизацию работы устаревших браузеров, которые могут не поддерживать медиа-запросы

@ media only all and (not handheld) { ... }

Логические операторы исключают присутствие элемента, который в логическом смысле выполнял бы функции "или" . Вместо этого применяются запятые. То есть в определенном наборе условий применение стилей будет осуществлено, если хотя бы одно из них подтвердится. Также следует отметить роль скобок в синтаксисе этих операторов, они предопределяют приоритет операции при считывании кода.

@ media all and (orientation: landscape) , all and (min- width: 480px) { ... }

Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.

Медиа-функции

Функции осуществляют задачу по уточнению определенных технических характеристик при выводе документа. Принцип работы условия основывается на считывании истинного значения. Другими словами если программированное утверждение выполняется, то и стиль будет задействован.

Основываясь на практическом опыте можно сказать, что подавляющее большинство функций работают по принципам массивов с указанными пределами. То есть условие будет находиться на минимальном или максимальном значении определенного параметра. Для этого используются приставки min- и max- .

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/).

color (min-color, max-color)

Эта функция подключает стилевое оформление в соответствии с цветовыми возможностями устройства, а именно количество бит на канал основного цвета. Для того, чтобы картина прояснилась, предлагаю рассмотреть простой пример. Предположим, что установленное значение наименьшей возможной цветовой гаммы является число 3. Это говорит о том, что устройство должно поддерживать 23 оттенков каждого из основного цвета. Просчитав все возможные комбинации цветов получим, что при таком значении, чтобы оформление применялось, нужно, чтобы устройство поддерживало как минимум 512 цветов. Ниже смотрим пример

@ media screen and (min- color: 3 ) { /* Минимум 512 цветов */ body { background: #ccc; } }

color-index (min-color-index, max-color-index)

Эта функция имеет сходство с предыдущей по принципу работы, но определяет она слегка другой параметр. Цель проверки - определить количество цветов, которое может воспроизвести устройство. Значением опять же выступает число, только теперь никаких вычислений - указываем сразу необходимый параметр. Такая функция часто используется для определения параметров смартфонов, принтеров, экранов и телевизионных устройств.

@ media all and (min- color- index: 256 ) { ... }

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Данная функция создана для определения соотношения экрана устройства, для которого составлялось оформление. Для этого достаточно указать два числа, которые соответствуют высоте и ширине экрана. Эти два значения должны разделятся между собой слешем (/). Ниже показан пример для девайсов с соотношением 16:9 и более

@ media screen and (min- device- aspect- ratio: 16 / 9 ) { ... }

device-height (min-device-height, max-device-height)

В этом случае речь идет о точном определении полной высоты устройства, на которое будет загружаться информация. Такая функция применяется во всех цифровых носителях за исключением устройств типа speech .

device-width (min-device-width, max-device-width)

Аналогично предыдущей функции, только этот оператор затрагивает значение ширины. В той же мере этой функцией пользуются во всех типах устройств, кроме речевых браузеров и похожих устройств. Ниже показан пример, согласно которому можно определить ширину страницы в зависимости от разрешения экрана:

< html> < head> < meta charset= "utf-8" > < title> device- width < style> div { padding: 10px; background: #e8bfad; margin: auto; } @ media screen and (min- device- width: 1600px) { div { width: 1500px; } } @ media screen and (device- width: 1280px) { div { width: 1100px; } } @ media screen and (device- width: 1024px) { div { width: 980px; } } < body> < div> Очень интересная информация для примера бла бла бла и тому подобное.

Сообщает системе, что данное устройство вывода распознает только один шрифт, не используя при этом параметры его высоты и интервалов между строк и букв. Такие устройства в наше время уже редкость, но иногда все-таки попадаются. К примеру, банковские терминалы. Для таких устройств характерно использование единиц em (если все таки пришлось прибегнуть к форматированию), как показано в примере

< html> < head> < meta charset= "utf-8" > < title> grid < style> @ media handheld and (grid) and (max- width: 15em) { body { font- size: 2em; } } < body> < p> Текст, который будет считываться с допотопного устройства.

height (min-height, max-height)

Работа функции очень похожа на CSS-свойство определения высоты элемента. В этом случае определяется высота активной зоны, которая захватывает определенный участок информации. Этот параметр зависит от высоты экрана устройства и не может привышать этот показатель, за исключением того случая, когда страница может масштабироваться.

monochrome (min-monochrome, max-monochrome)

Определяет показатель монохромности устройства. Это позволяет для черно-белого дисплея составить более простое в цветовом плане оформление. В качестве значения функции выступают обычные числа, которые сообщают нагрузку бит на 1 пиксель. Чтобы было более понятно, при укаании числа 8 будет осуществляться поиск устройства, которое сможет распозновать 256 оттенков необходимого цвета. К примеру,

@ media print and (monochrome) { body { font- family: Times, "Times New Roman" , serif; } h1, h2, p { color: black; } } @ media print and (color) { body { font- family: Arial, Verdana, sans- serif; } h1, h2, p { color: #556b2f; } }

orientation

Функция распознает ориентации страниц в устройстве. Существует две достаточно распространенные ориентации: альбомная и книжная. В первом случае у страницы ширина будет превышать показатель высоты, а во втором - с точностью до наоборот. Ниже представлен пример, в котором фоновое изображение меняется в зависимости от установленной ориентации устройства

@ media screen and (orientation: landscape) { #logo { background: url(logo1.png) no-repeat; } } @ media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; } }

resolution (min-resolution, max-resolution)

Устанавливает разрешения считывающего устройства, на основе чего будет применятся заданное оформление. Ниже показано, как можно определить оформление для принтера, у которого разрешение составляет 500 точек на дюйм рабочего пространства

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

Этпа функция предназначена только для работы с телевизорами. Таким образом можно определить способ считывания информации данным устройством. Вообще, существует 2 способа:

  • Первый метод называется череcстрочный (interlace ) - упрощенный способ считывания информации по которому сначала выводятся четные строчки кадра, а затем не четные.
  • Прогрессивный (progressive ) метод работает по сложному и выводит полную информацию и сразу.

    • width (min-width, max-width)

    Указывает на ширину активной зоны экрана или браузера. Зачастую этот параметр не превышает ширину экрана устройства для вывода информации. Применяется этот параметр при адаптивной верстке, когда нужнео наладить нормальное оформления для устройств с разной шириной экрана. Ниже представлен один небольшой пример, по которому при изменении ширины будет менятся цвет заднего фона

    < html> < head> < meta charset= "utf-8" > < title> Ширина страницы < style> body { background: #eee; } @ media screen and (max- width: 980px) { body { background: #fc0; } } < body> < p> Текст, который не имеет никакого смысла и написан для примера. Такие тексты называют рыбными.

    Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

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

    Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

    Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

    Поддержка медиа запросов в браузере IE8 осуществляется посредством подключения к странице скрипта respond.js:

    Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может "приспосабливаться" (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье "Что такое адаптивная разметка" .

    Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье "Знакомство с meta viewport" .

    Подключение метатега viewport к странице в большинстве случаях осуществляется так:

    Синтаксис медиа запросов

    Для создания медиа запросов используется следующий синтаксис:

    @media условие { /* стили (они будут выполняться, если устройство соответствует указанному условию) }

    Основные типы устройств:

    • all - все устройства (по умолчанию).
    • print - принтеры и режим предварительного просмотра страницы перед печатью.
    • screen - устройства с дисплеями.

    Логические операторы:

    • and - требует обязательного выполнения всех указанных условий.
      Например: @media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ } Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
    • , (запятая) - требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе. @media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ } Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
    • not - предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and . @media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS ... */ } Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
      Т.е. запрос в вышеприведённом примере будет обрабатываться так: @media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS ... */ }
    Медиа функции

    Для составления условия в @media можно использовать следующие фукнции:

    • width - указывает требования к ширине области просмотра устройства (браузера). /* применить стили CSS только для устройств с шириной области просмотра, равной 320px */ @media (width: 320px) { /* Стили CSS ... */ }
    • min-width - задаёт минимальную ширину области viewport в px , em или других единицах. /* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */ @media (min-width: 544px) { /* Стили CSS ... */ }
    • max-width - указывает на то, какой должна быть максимальная рабочая область устройства (браузера). /* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */ @media (max-width: 1199px) { /* Стили CSS ... */ }
    • height , min-height и max-height - задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport. /* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */ @media (min-height: 720px) { /* Стили CSS ... */ }
    • orientation - функция, которая проверяет то, в каком режиме (portrait или landscape) отображается страница.
      Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка: /* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */ @media (orientation: landscape) { #background-image { background: url(image1.png) no-repeat; } } /* portrait (портретный) - это режим, в котором высота viewport больше ширины */ @media (orientation: portrait) { #background-image { background: url(image2.png) no-repeat; } }
    • aspect-ratio (min-aspect-ratio , max-aspect-ratio) - позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения. /* для дисплеев с соотношением сторон 16/9 */ @media screen and (device-aspect-ratio: 16/9) { /* Стили CSS ... */ } /* для дисплеев с соотношением сторон 1336/768 */ @media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS ... */ }
    • resolution (min-resolution , max-resolution) - указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель). /* для экранов, имеющих высокую плотность пикселей (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */ @media screen and (min-resolution: 2dppx) { /* Стили CSS ... */ } /* при печати с разрешением свыше 300 точек на дюйм */ @media print and (min-resolution: 300dpi) { /* Стили CSS ... */ }
    Использование медиа-запросов при подключении файлов CSS

    Медиа запросы также можно применять в качестве значения атрибута media элемента link . Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

    Кроме этого медиа запросы можно также использовать в правиле @import , которое предназначено для импортирования стилей из других файлов CSS в текущий.

    /* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */ @import url(styles-xs.css) (max-width: 543px);

    Медиа запросы для Bootstrap 3

    Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

    /* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ /* Стили CSS (по умолчанию) - для ширины viewport 1200px */ }

    Вышеприведённые запросы необходимо использовать только в указанном порядке.

    Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.

    @media (max-width: 767px) { /* стили для xs-устройств */ } @media (min-width: 768px) and (max-width: 991px) { /* стили для sm-устройств */ } @media (min-width: 991px) and (max-width: 1199px) { /* стили для md-устройств */ } @media (min-width: 1200px) { /* стили для lg-устройств */ }

    Медиа запросы для Bootstrap 4

    Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

    /* xs - устройства (до 576px) */ /* CSS для ширины, которая меньше 575px (включительно) */ /* sm-устройства (больше или равно 576px) */ @media (min-width: 576px) { /* CSS для: 576px = 1200px */ }

    Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

    /* xl-размер (>=1200px) */ /* CSS для >=1200px */ /* lg-размер (

    Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

    Подключение медиазапросов с использованием тега

    , который сообщает браузеру, что внутри него содержится код CSS :

    : ...код CSS 2. Используя CSS правило @media внутри HTML тега : @media not | only mediatype and (media function ) { ...код CSS }

    Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media .

    Подключение медиазапросов с использованием правила @import

    @import CSS файлов:

    @import @import url ("print.css" ) print; @import @import url ("file.css" ) screen and (orientation :landscape );

    Учтите тот факт, что правило @import (Google @import .

    Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media :

    Вы можете подключать различные стили для различных устройств, используя HTML тег (сообщает браузеру, что внутри него содержится код CSS):

    1. Используя атрибут media HTML тега : ...код CSS 2. Используя CSS правило @media внутри HTML тега : @media not | only mediatype and (media function ) { ...код CSS }

    Кроме того, Вы можете использовать правило @import , которое позволяет копировать стили из других CSS файлов:

    @import url ("main.css" ) (min-width :481px ) and (max-width :768px ); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */ @import url ("print.css" ) print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */ @import url ("protv.css" ) projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */ @import url ("file.css" ) screen and (orientation :landscape ); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/

    Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google ), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import .

    Медиазапросы, используемые в Bootstrap 4

    В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4 . Bootstrap это HTML , CSS и Javascript фреймворк для создания адаптивных страниц.

    Так как Bootstrap разработан, чтобы быть мобильным в первую очередь, разработчики фреймворка используют несколько медиазапросов для создания разумных точек останова для макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.

    Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4 :

    // Small devices (landscape phones, минимальная ширина области просмотра 576px и выше) @media (min-width : 576px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и выше) @media (min-width : 768px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и выше) @media (min-width : 992px ) { ...код CSS } // Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше) @media (min-width : 1200px ) { ...код CSS }

    Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).

    Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4 :

    // Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже) @media (max-width : 575.98px ) { ...код CSS } // Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже) @media (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, максимальная ширина области просмотра 992px и ниже) @media (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, максимальная ширина области просмотра 1200px и ниже) @media (max-width : 1199.98px ) { ...код CSS }

    В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

    // Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px) @media (min-width : 576px ) and (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px) @media (min-width : 768px ) and (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px) @media (min-width : 992px ) and (max-width : 1199.98px ) { ...код CSS }

    Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and ("И"), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

    Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

    // Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px) @media (min-width : 768px ) and (max-width : 1199.98px ) { ...код CSS } Настройка области просмотра

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

    Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

    • Атрибут name задает имя документа метаданным, значение "viewport" дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
    • Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip ), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
    • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

    Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.

    Доступные значения:

    Значение атрибута Определение
    width Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width ).
    height Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height ).
    initial-scale Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0.
    minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение - положительное целое число от 0.0 до 10.0.
    maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение - положительное целое число от 0.0 до 10.0.
    user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).
    Версия CSS CSS3 Пример использования

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

    Для просмотра страниц пользователями мы установим следующие CSS стили:

    h2 { color : brown ;} p { color : red ;} body

    Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:

    @media print { h2, p { color : #000 ;} body }

    Окончательный файл CSS будет выглядеть следующим образом:

    h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */ @media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF ; } /* устанавливаем цвет заднего фона - белый */ }

    Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important , которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important .

    Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):

    @media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 !important ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF !important ; } /* устанавливаем цвет заднего фона - белый */ } h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */

    Теперь свяжем наш файл CSS (css_pr_media.css ) с документом, используя элемент :

    HTML разметка примера:

    Пример использования CSS правила @media Рапаны

    Рапаны (лат. Rapana) - род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.

    Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати).

    © Copyright 2024, pcwe.ru - Портал о персональных компьютерах.