CSS Media queries -- описание, особенности использования и рекомендации

Опубликованно 01.01.2018 01:18

Media queries — CSS-это функция, которая позволяет содержимое веб-страниц-адаптация к различным размерам экрана и разрешения. Они являются неотъемлемой частью гибкого веб-дизайна и служат для настройки внешнего вида веб-сайтов на нескольких устройствах с различными размерами экрана. Так, CSS3 Media Queries-модуль позволяет преобразовывать контент в таких условиях, как разрешение экрана смартфона или компьютера. Из рекомендованного W3C стандарт в июне 2012 году и активно применяется сегодня в веб-разработки и графического дизайна.

CSS Media queries полезны, если вы хотите применить стили в зависимости от общего типа устройства (например, принтера или экрана), специфических свойств (например, от ширины окна браузера) или от окружающей среды (например, от условий внешнего освещения). Огромное количество подключенных к Интернету устройств, доступных сегодня, делает медиа-запросы являются важным инструментом для создания веб-сайтов и приложений, которые являются достаточно прочными, чтобы на любом оборудовании.

История

Медиа-запросы были впервые упоминается в первоначальном предложении CSS Hocon Wium Lie в 1994 году, но тогда не часть CSS1. Рекомендации HTML4 в 1997 году показывает пример, как в будущем добавить эти компоненты могут быть.

В 2000 году W3C работу над Media Queries начал. Первый публичный Рабочий проект для медиа-запросов был опубликован в 2001 году. Спецификация была Рекомендация W3C в 2012 году, после того, как браузер-добавлена поддержка. Как написано в CSS медиа-запросов?

Запросы могут быть вставлены в HTML-файл веб-странице или в отдельном файле содержат .CSS, на которые он ссылается. Ниже приведено описание и пример медиа-запросов в CSS:

@media screen and (max-width: 768px)

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

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

Как с помощью CSS3 Media queries?

Во второй веб-дизайн медиа-запросы играют роль фильтра для различных размеров экрана. Как и все модули в каскадных таблицах стилей, те, которые появляются в списке, переписать тех, кто над ними. Поэтому стандартные стили обычно сначала определен в CSS-документе, а затем Media-queries для различных размеров экрана. Например, может быть определен стилей рабочего стола и затем мультимедийных запрос со стилями для пользователей планшетов, а затем — для пользователей смартфонов. Стили могут быть определены в обратном порядке.

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

Например, значение разрешения может быть использовано для обнаружения HiDPI-дисплеев (например, изображение сетчатки) и загрузка графики с высоким разрешением вместо привычных картинок. Использование и ошибки

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

Типы носителей

Тип носителя строке HTML-документа может объяснить в голову, установив атрибут «media» внутри элемента <link>. Значение атрибута «медиа» указывает, на каком устройстве соответствующий документ будет отображаться. Типы носителей могут также rule в инструкции обработки XML, @import at-rule @media at-объяснил. Просмотр мультимедиа «все» может также использоваться, чтобы указать, что Таблица стилей применяется ко всем типам носителей.Что такое CSS?

CSS (каскадные таблицы Стилей Cascading style Sheets) служит для форматирования макета Web-страницы, определение видов текста, размеров, таблиц и других аспектов веб-контента, которые определены ранее, только в HTML-структурой страницы.

CSS помогает веб-разработчикам единый формат для нескольких страниц сайта. Вместо этого характер отдельных таблиц и текста в HTML определить стили определены только один раз в CSS-документ. Если формат определен в каскадных таблицах стилей, он может быть использован каждой страницы, ссылка на CSS-файл. Кроме того, CSS изменение стилей упрощена до нескольких страниц одновременно. Например, Web-разработчики об увеличении размера стандартного текста с 10 до 12 пт на пятидесяти страницах сайта планирование. Если при этом все страницы ссылаются на одну и ту же таблицу стилей, размер текста будет достаточно, только в таблице изменить, и на всех страницах он будет правильный размер.

Хотя CSS-идеально подходит для стилей текста создание, его страницы тоже полезно для других аспектов форматирования макета веб -. Например, CSS вы можете заполнение ячеек таблицы, стиль, толщину и цвет рамки, а также для элементов изображения или другие объекты, определяют. CSS по сравнению с HTML, предлагает веб-разработчикам более точный контроль над тем, как веб-страницы.

Типы мультимедийных запросов

Типы носителей, которые описывают общие категория устройства. Хотя сайты были разработаны, как правило, экранов, может шаблоны программистов создавать формат, для специальных устройств, таких как принтер или косвенные. Например, этот кусок CSS-кода для принтера: @media print {...}.

Вы также можете настроить таргетинг на несколько устройств. Например, правило @media использует два медиа-запрос для ориентации устройств на экран и печать: @media screen, print {...}.Медиа-функции CSS

Мультимедиа-функции, описывающие специфические свойства user-Agent, устройства вывода или среды. Например, определенные стили на Widescreen-мониторов, компьютеров или устройств, которые могут использоваться в условиях в условиях низкой освещенности. В этом примере стили применяются, если основной механизм ввода пользователя (например, мышь) может зависать над элементами: @media (hover: hover) {...}.

Множество мультимедийных функций является функцией диапазона, что означает, что вы можете рисовать префикс «min» или «max» для выражения ограничения из условия минимума или максимума. Пример: данная команда применяет стили только тогда, когда ширина окна просмотра браузера равна или меньше 12,450 px: @media (max-width: 12450px) {...}.

Если вы не будете использовать запрос мультимедийные функции без указания значения вложенные стили, пока значение функции равно нулю. Например, CSS будет применяться к любому устройству с цветным дисплеем: @media (цвет) {...}.

Если функция не распространяется на устройство, на котором браузер работает, выражений, в которых эти функции содержат СМИ, которые всегда не правы. Например, стили, в следующий запрос, которая никогда не будет использована, потому что ни одна языковая прибор нет формат экрана: @media и речь (пропорции: 11/5) {...}.Техническая Спецификация

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

Синтаксис запросов к мультимедиа используется и в других контекстах, например, в Media-атрибута элемента <source>, который может быть настроен, строки запроса использовать СМИ, чтобы определить, можно ли с этого источника при выборе определенного изображения для использования в элемент <picture>.

Метод Window.Match Media () может быть использован для окна на обращение в СМИ. Вы можете также использовать функцию Media Query list.addListener () для уведомления об изменениях состояния запросов. С помощью этой функции ваш сайт или приложение в состоянии реагировать на изменения конфигурации устройства, ориентации или статуса.Запросы о вызове мультимедийного стили

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

Один из них — использование Media queries, которые работают для вызова пользовательских стилей устройств на основе ваших размеров. В прошлом программисты спорили о том, является ли дисплей требования является лучшим решением в случае мобильных устройств, и эта дискуссия продолжается до сих пор. Сейчас официально признано, что CSS медиа-запросов (media queries) — это простой и эффективный способ управления различного контента для различных устройств, наиболее часто используемых запросов те, которые касаются высоты и ширины окна просмотра.

Звонок с внешней таблице стилей

CSS-стили для медиа-запросы сначала проверьте тип носителя на строку user-Agent, прежде чем приступить к проверке физических атрибутов в окне программы просмотра. Они включают отображение CSS, которое можно вызвать при помощи внешних таблиц стилей. Внешний вызов будет выглядеть так: <link rel = "stylesheet" media = "(min-width: 320px) and (max-width: 480px)" href = "css/Your style Sheet.css" />.

Как раз такой же проблемой CSS будет выглядеть так:

@media screen and (min-width:320px)

and (max-width:480px){

/*Insert your styles here

}.

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

Работа с изображениями

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

img {

max-width: 100%;

}

При этом изображение уменьшается, что размер контейнера соответствует, меньше ширины изображения. Максимальная ширина кладет означает на 100%, что изображение не будет расти больше, чем его фактический размер.

Однако это может быть проблемой, когда речь заходит о производительности веб-сайте, потому что они по существу обеспечивают Full-size Image на любом устройстве. Это не простое решение, особенно если вы на сайте с устаревшими картинками. Однако Adaptive Images представляет собой плагин, который может оптимизировать ваши изображения на основе размера экрана. Адаптивный дизайн на основе медиа-запросов Foundation Framework также позволяет обмениваться изображениями на основе размеров экрана.

При использовании фотографий необходимо SVG, Web Fonts, Web-Art и CSS.

Категория: Мобильная техника