Атрибут media в HTML


Содержание

WEBTEORETIK

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

  • Главная
  • >>
  • Раздел >>Адаптивная верстка
  • >>
  • Материал >>
  • Подключение медиа-запросов

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

Категория: Адаптивная верстка Просмотров: 4544 Коментариев: 4 Дата: 2020-02-05 Добавил: admin

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

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

Значение мета тега можно записать двумя способами:

Способ 1:

Способ 2:

Можно задать данное значение и следующим образом, к примеру: w > HTML

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

1. Способ.

Мы используем один CSS файл и уже в нем подключаем href= «cсылка на медиа-запросы»> медиа-запросы . В HTML файле подключение CSS файла делается как обычно, внутри тегов и .

Где styles это название каталога, в котором располагается уже сам файл style.css, в котором мы и делаем медиа-запрос.

Еще про медиа-запросы можно найти тут.

2. Способ.

В этом способе мы можем использовать много CSS файлов со стилями, которые подключаются только при определённом заданном размере экрана. И так подключается данный файл вот таким образом:

В HTML между тегами и указываем подключение стилей как обычно, через тег .

Далее указываем атрибут media где прописываем, что only (Все) — screen (возможные значения экрана) — у которых ширина экрана меньше или равна 700px будет применяться файл ( style.css) с стилями которые будет содержать этот файл.

3. Способ.

И третий способ, это где наши медиа-запросы подключаются через @import и делается это следующим образом:

CSS — Медиа запросы (media queries)

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

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

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

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

Поддержка браузерами CSS3 медиа запросов (media queries)

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

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

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

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

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

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

  • all — все устройства (по умолчанию).
  • print — принтеры и режим предварительного просмотра страницы перед печатью.
  • screen — устройства с дисплеями.
  • and — требует обязательного выполнения всех указанных условий.
    Например:Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
  • , (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
  • not — предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and .Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
    Т.е. запрос в вышеприведённом примере будет обрабатываться так:

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

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

  • width — указывает требования к ширине области просмотра устройства (браузера).
  • min-width — задаёт минимальную ширину области viewport в px , em или других единицах.
  • max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
  • height , min-height и max-height — задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport.
  • orientation — функция, которая проверяет то, в каком режиме ( portrait или landscape ) отображается страница.
    Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:
  • aspect-ratio ( min-aspect-ratio , max-aspect-ratio ) — позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения.
  • resolution ( min-resolution , max-resolution ) — указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель).
Илон Маск рекомендует:  Domain name service cлужба доменных имен

Использование медиа-запросов при подключении файлов CSS

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

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

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

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

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

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

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

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

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

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:

Код JavaScript, учитывающий параметры устройств

Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа запросам), осуществляется с помощью метода matchMedia объекта window .

Осуществляется это следующим образом:

Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).

Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Поддержка браузерами метода matchMedia (JavaScript) — ноябрь 2020

Новые атрибуты гиперссылок HTML5: download, media и ping

Дата публикации: 2014-04-10

От автора: Гиперссылки существуют с самого зарождения Сети. А в начале эры HTML5 к скромному тэгу a добавились три новых атрибута поддержки уже существующих атрибутов вроде href, rel и прочих за компанию.

Эти новые атрибуты: download, media и ping. В данной статье мы вкратце разберемся в том, что эти атрибуты из себя представляют, и как по мере улучшения браузерной поддержки можно будет ими пользоваться.

Атрибут download

Атрибут download — новичок HTML5. Он дополняет существующий атрибут href, говоря браузеру о том, что ресурс, на который указывает href, вместо перехода по ссылке должен напрямую скачиваться (что происходит с тем файлом, который браузер способен открыть, например PDF). Значение атрибута download применяется для имени скачиваемого файла.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

При щелчке по ссылке загрузки пользователь скачает Ежемесячный отчет за март 2014.pdf, а не файл с миленьким названием eid987jdien2i.pdf.


Теоретически нет ограничений тому, что можно ввести в атрибут download. Практически это не совсем так, потому что нужно помнить о тех ограничениях, которые навязывают нам операционные системы — по поводу того, какие символы нельзя использовать в названиях файлов — такие, как обратный слэш ‘\’ в Windows или прямой слэш ‘/’ в *nix и OS X — и о том, что браузер может соответственно адаптировать значение атрибута download. Также следует отметить, что значение атрибута download можно отменить параметром filename заголовка HTTP Content-Disposition.

Атрибут download можно применять с blob и data URI, отчего он очень удобен там, где пользователю требуется сохранить созданный им в вашем веб-приложении динамический контент (например, в приложении для рисования).

Традиционно вы бы установили атрибут href на URI бинарного большого объекта (blob) или данных (data), а затем, как с вышеприведенном примере с ежемесячным отчетом, установили бы атрибут download на более содержательное имя файла. В следующем примере показано, как сделать это при использовании Canvas API.

А вот активный демопример:

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

Браузерная поддержка атрибута download

Хотя вы можете считать, что атрибут download предвещает конец вашим стараниям по внедрению на сервере логики файловой загрузки, к сожалению, он еще не полностью поддерживается в основных браузерах. На момент написания этой статьи Safari и IE (как для настольных компьютеров, так и для мобильных устройств) этого атрибута не поддерживают.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Атрибут media

Если вы работали с CSS, то уже сталкивались с атрибутом media, и наверняка пользовались им для тэга link. В HTML5 атрибут media уже сейчас можно применять к гиперссылке. Он работает таким же образом, а его значение может быть любым достоверным медиазапросом.

Будучи примененным к тэгу a, атрибут media используется в чисто справочных целях. Он может пригодиться, например, в случае, когда вы предусматриваете загрузку в зависимости от устройства, такую, как обои для десктопа и мобильного устройства:

Еще его можно применить для ссылок «Печать», часто встречающихся в длинных многостраничных статьях, где вы переходите по ссылке для того, чтобы форматировать ее на одной странице для печати:

Браузерная поддержка атрибута media

Что касается этого произведения, то, похоже, у данного атрибута не так уж много поддержки в гиперссылках, если вообще таковая имеется. Он внесен в списки атрибутов HTML5 в рекомендациях MDN по HTML, но не причислен к действующим атрибутам в спецификациях WHATWG.

Атрибут ping

Наконец, давайте рассмотрим новый атрибут ping. Он принимает разделенный пробелами список URL’ов, которые нужно пинговать, если пользователь удачно доберется до href гиперссылки. Или, другими словами, этот атрибут обеспечивает естественную поддержку слежения за щелчком и ссылкой:

Однако в спецификации WHATWG нас предупреждают:

Атрибут ping дублирует такие ранее появившиеся технологии, как переадресация HTTP и JavaScript, позволявшие веб-страницам отследить, какие сторонние ссылки наиболее популярны или дававшие возможность рекламодателю проследить уровень обращений к рекламному окну.

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

Илон Маск рекомендует:  div в HTML

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

Браузерная поддержка атрибута ping

Текущая браузерная поддержка ping весьма разношерстная. Safari и Chrome его поддерживают, у Firefox’а имеется его поддержка, но по умолчанию она отключена, а IE и Opera его не поддерживают. Также следует отметить, что атрибута ping нет в текущем проекте спецификации W3C HTML5, зато он присутствует в спецификации WHATWG HTML5.

Резюме

Итак, вот вам три новых атрибута, добавленных в HTML5 к элементу a — download, media и ping. Как видите, когда улучшится их браузерная поддержка, они станут весьма удобными и будут потенциально применяться во многих случаях.

Автор: Ian Oxley

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Адаптивный и мобильный дизайн с CSS3 Media Queries

Для начала посмотрим это в действии.

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

Другие примеры

Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr.

Обзор

Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.

HTML5.js

Сбрасываем HTML5 элементы в block

article , as >, details , figcaption , figure , footer , header , hgroup , menu , nav , section <
display : block ;
>

Описываем основную структуру в CSS

#pagewrap <
width : 980px ;
margin : 0 auto ;
>
#header <
height : 160px ;
>
#content <
width : 600px ;
float : left ;
>
#sidebar <
width : 280px ;
float : right ;
>
#footer <
clear : both ;
>

Шаг 1

На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.

CSS3 Media Queries

Теперь начинается самое интересное – media queries.

Подключаем Media Queries Javascript

Подключаем CSS media queries

link href = «media-queries.css» rel = «stylesheet» type = «text/css» >

Размер экрана меньше 980px (резиновый макет)

@media screen and (max-width: 980px) <
#pagewrap <
width : 95 % ;
>
#content <
width : 60 % ;
padding : 3 % 4 % ;
>
#sidebar <
width : 30 % ;
>
#sidebar .widget <
padding : 8 % 7 % ;
margin-bottom : 10px ;
>
>

Размер экрана меньше 650px (одноколоночный макет)

@media screen and (max-width: 650px) <
#header <
height : auto ;
>
#searchform <
position : absolute ;
top : 5px ;
right : 0 ;
>
#main-nav <
position : static ;
>
#site-logo <
margin : 15px 100px 5px 0 ;
position : static ;
>
#site-description <
margin : 0 0 15px ;
position : static ;
>
#content <
width : auto ;
float : none ;
margin : 20px 0 ;
>
#sidebar <
width : 100 % ;
float : none ;
margin : 0 ;
>
>

Размер экрана меньше 480px

@media screen and (max-width: 480px) <
html <
-webkit-text-size-adjust : none ;
>
#main-nav a <
font-size : 90 % ;
padding : 10px 8px ;
>
>

Эластичные изображения

img <
max-width : 100 % ;
height : auto ;
width : auto \ 9 ; /* ie8 */
>

Эластичные встраиваемые видео

.video embed ,
.video object ,
.video iframe <
width : 100 % ;
height : auto ;
>

Initial Scale Meta Tag (iPhone)

Финальное Демо

Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.

Что означает атрибут media = «» в определении HTML таблицы стилей?

Я уверен, что некоторые из вас увидели следующее:

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

w3 может объяснить это лучше всего.

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

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

Экран — это то, о чем вы обычно думаете — экран компьютера, как большинство людей увидит сайт.

Проецирование — если вы хотите иметь более крупный шрифт при проецировании веб-сайта.

Определяет медиа-тип таблицы стилей. Или применение данной таблицы стилей, если вы это сделаете.

Если вы включили таблицу стилей со свойством media для печати; правила в этой таблице стилей будут влиять только на страницу, когда она будет распечатана. Если вы установите для свойства media значение «screen»; правила в таблице стилей не повлияют на распечатку страницы, но будут влиять на страницу при просмотре в браузере.

Если вы определяете свойство мультимедиа как «экран, печать»; правила в таблице стилей будут влиять как на распечатку страницы, так и на то, как она выглядит в браузере.

Здесь ссылка на документацию на W3C (организация, которая определяет стандарты для CSS).

One more step

Please complete the security check to access codepen.io


Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340b6614fc88f79 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

HTML media attribute

media

The purpose of the HTML media attribute is to define the media type that the resource linked to the element is designed for.

Supported elements

HTML media attribute supports style and link elements.

Syntax

Where ElementName is any supported element.

Type of value

Value

Value Intended media
screen Computer screens. This is the default value.
tty Fixed-pitch character grid, such as teletypes, terminals, or portable devices those have limitations in display capabilities.
tv Television type devices (low resolution, color, limited scrollability).
projection Projectors.
handheld Handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).
print Print preview mode/printed in an opaque media.
braille Braille feedback devices.
aural Speech synthesizers.
all Suitable for all devices.

Default value

Default value of HTML media attribute is screen.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Илон Маск рекомендует:  Vesa 2 0 программируем в защищенном режиме

Example of HTML media attribute with style

Result

View this example in a separate browser window

Example of HTML media attribute with link

Result

View this example in a separate browser window

Медиа запросы (@media CSS)

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

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

Синтаксис CSS @Media

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

  • all — для всех типов устройств (по умолчанию используется это значение)
  • braille — для устройств Брайля (для чтения слепыми людьми)
  • embossed — для принтеров Брайля
  • handheld — для смартфонов или портативных устройств
  • print — для принтеров
  • projection — для проекторов
  • screen — для экранов компьютеров, планшетов, смартфонов и т.д.
  • speech — для речевых браузеров
  • tty — для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
  • tv — для телеэкранов

Примечание
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).

Примечание
Запятая воспринимается как оператор or.

Рассмотрим какие есть медиа особенности.

Медиа особенности

  • aspect-ratio (min-aspect-ratio, max-aspect-ratio) — определяет отношение ширины и высоты области просмотра
  • color (min-color, max-color) — определяет количество бит на цвет для устройства
  • color-index (min-color-index, max-color-index) — определяет количество цветов, которое устройство может отображать
  • device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) — определяет соотношение сторон экрана устройства через. Записывается через слэш
  • device-height (min-device-height, max-device-height) — определяет всю доступную высоту экрана устройства
  • device-width (min-device-width, max-device-width) — определяет всю доступную ширину экрана устройства
  • grid — отвечает за вывод у устройства. Бывает два вида: сеточный и точечный. Терминалы, дисплей телефона поддерживают только один шрифт, что равносильно значению 1.
  • height (min-height, max-height) — высота области просмотра
  • width (min-width, max-width) — ширина области просмотра
  • orientation ([landscape] | [portrait]) — определяет в каком положение находится экран (альбомном или портретном)
  • resolution (min-resolution, max-resolution) — определяет разрешение устройства вывода

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width .

Примеры с медиа запросами

Пример №1. Ограничение на максимальную ширину

Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.

Пример №2. Задание диапазона на ширину

Этот код только будет работать только в случае, если ширина экрана находится в диапазоне от 640 до 1024 пикселей.

Пример №3. Исключение диапазона

Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.

Пример №4. Исключение устройства

Стиль будет работать для всех устройств кроме смартфонов handheld .

Чтобы не создавать путаницу в стилях и облегчить загрузку сайта, файлы со стилем для медиа запросов можно подгружать только в том случае, если это необходимо. Делается это через тег link:

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340b6b37b2d8f6d • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Медиа запросы (@media CSS)

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

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

Синтаксис CSS @Media

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

  • all — для всех типов устройств (по умолчанию используется это значение)
  • braille — для устройств Брайля (для чтения слепыми людьми)
  • embossed — для принтеров Брайля
  • handheld — для смартфонов или портативных устройств
  • print — для принтеров
  • projection — для проекторов
  • screen — для экранов компьютеров, планшетов, смартфонов и т.д.
  • speech — для речевых браузеров
  • tty — для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
  • tv — для телеэкранов

Примечание
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).

Примечание
Запятая воспринимается как оператор or.

Рассмотрим какие есть медиа особенности.

Медиа особенности

  • aspect-ratio (min-aspect-ratio, max-aspect-ratio) — определяет отношение ширины и высоты области просмотра
  • color (min-color, max-color) — определяет количество бит на цвет для устройства
  • color-index (min-color-index, max-color-index) — определяет количество цветов, которое устройство может отображать
  • device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) — определяет соотношение сторон экрана устройства через. Записывается через слэш
  • device-height (min-device-height, max-device-height) — определяет всю доступную высоту экрана устройства
  • device-width (min-device-width, max-device-width) — определяет всю доступную ширину экрана устройства
  • grid — отвечает за вывод у устройства. Бывает два вида: сеточный и точечный. Терминалы, дисплей телефона поддерживают только один шрифт, что равносильно значению 1.
  • height (min-height, max-height) — высота области просмотра
  • width (min-width, max-width) — ширина области просмотра
  • orientation ([landscape] | [portrait]) — определяет в каком положение находится экран (альбомном или портретном)
  • resolution (min-resolution, max-resolution) — определяет разрешение устройства вывода

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width .

Примеры с медиа запросами

Пример №1. Ограничение на максимальную ширину

Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.

Пример №2. Задание диапазона на ширину

Этот код только будет работать только в случае, если ширина экрана находится в диапазоне от 640 до 1024 пикселей.

Пример №3. Исключение диапазона

Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.

Пример №4. Исключение устройства

Стиль будет работать для всех устройств кроме смартфонов handheld .

Чтобы не создавать путаницу в стилях и облегчить загрузку сайта, файлы со стилем для медиа запросов можно подгружать только в том случае, если это необходимо. Делается это через тег link:

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL