Как подключить media css
Перейти к содержимому

Как подключить media css

  • автор:

Медиазапросы — CSS: Адаптивность сайта

Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиазапросов. Медиазапросы — специальные условные конструкции, которые позволяют применять стили только для определённых устройств.

Медиазапросы записываются следующим образом:

В качестве условия могут выступать различные значения и константы. Зачастую используются следующие конструкции:

Ориентация экрана

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

  1. landscape . Условие выполнится для устройств с горизонтальной ориентацией экрана. Горизонтальная — ориентация, при которой ширина viewport больше его высоты.
  2. portrait . Условие выполнится для устройств с вертикальной ориентацией экрана. Вертикальная — ориентация, при которой высота viewport больше его ширины.
 @media (orientation: landscape)  /* При горизонтальной ориентации фоновым цветом сайта будет белый */ body  background: #FFF; > > @media (orientation: portrait)  /* При вертикальной ориентации фоновым цветом сайта будет чёрный */ body  background: #000; > >  

Разрешение экрана

При использовании медиазапросов мы также можем исходить из ширины или высоты viewport. Для этого используются знакомые нам по обычным CSS-правилам условия width, min-width, max-width для ширины и height, min-height, max-height для высоты.

С помощью таких условий создаются breakpoint — контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

 /* Здесь будут все стили для устройств с viewport больше 1400 пикселей. */ @media (max-width: 1400px)  /* Стили для устройств, у которых ширина viewport меньше или равно 1400 пикселей, но больше 990 пикселей. Эти стили будут использованы для планшетов и ноутбуков с низким разрешением */ > @media (max-width: 990px)  /* Стили для устройств, у которых ширина viewport меньше или равно 990 пикселей, но больше 770 пикселей. Эти стили подойдут для некоторых мобильных устройств и планшетов */ > @media (max-width: 770px)  /* Стили для устройств, у которых ширина viewport меньше или равно 770 пикселей. Это множество мобильных устройств */ >  

Обратите внимание на порядок написания свойств. Помните, что CSS является каскадной таблицей, поэтому порядок стилей необходимо контролировать. В данном случае к элементу вначале будет применён стиль по умолчанию, который не находится в медиазапросе, затем поочерёдно будут применяться стили в зависимости от значений в условии медиазапроса.

Например, при ширине viewport 770 пикселей для элемента стили применятся в следующем порядке:

  • Стили по умолчанию.
  • Стили для условия медиазапроса max-width: 1400px .
  • Стили для условия медиазапроса max-width: 990px .
  • Стили для условия медиазапроса max-width: 770px .

Подход, описанный выше называется Desktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиазапросы, дописываем стили для всё более маленьких значений viewport. Его характерная черта в медиазапросах — использование конструкции max-width в качестве условия.

В противовес Desktop First существует подход Mobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиазапросы, пишутся стили для больших размеров viewport. Если в Desktop First основной конструкцией являлось использование max-width, то в Mobile First используется min-width.

Стили, написанные с использованием подхода Mobile First выглядят следующим образом:

 /* Здесь будут все стили для мобильных устройств с viewport меньше 770 пикселей. */ @media (min-width: 770px)  /* Стили для устройств, у которых ширина viewport больше или равно 770 пикселей */ > @media (min-width: 990px)  /* Стили для устройств, у которых ширина viewport больше или равно 990 пикселей, но меньше 1400 пикселей. */ > @media (min-width: 1400px)  /* Стили для устройств, у которых ширина viewport больше или равно 1400 пикселей */ >  

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

Условия внутри медиазапросов можно комбинировать. Для этого существует три логических оператора:

  • Логическое «И». Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического «И» используется ключевое слово and . Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширину viewport не меньше 600 пикселей:
 @media (orientation: portrait) and (min-width: 600px)  .container  /* Для устройств с портретной ориентацией И шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >  
  • Логическое «ИЛИ». Свойства применятся в том случае, если хотя бы одно из условий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием «ИЛИ»:
 @media (orientation: portrait), (min-width: 600px)  .container  /* Для устройств с портретной ориентацией ИЛИ шириной viewport не менее 600 пикселей сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >  
  • Логическое «НЕ». Свойства применятся в том случае, если условие не выполняется. Используется ключевое слово not . Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not .
 @media not all and (orientation: landscape)  .container  /* Для устройств с портретной ориентацией (условие выглядит как «НЕ горизонтальная») сделать элементы с классом container шириной в 100 процентов */ width: 100%; > >  

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

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

lang=«ru»> charset=«UTF-8»> name=«viewport» content=«width=device-width, initial-scale=1.0»> Подключение CSS файлов rel=«stylesheet» href=«style.css»> rel=«stylesheet» media=«screen and (min-width: 750px)» href=«style750px.css»>

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Как подключить медиа запросы?

Подскажите пожалуйста, есть шаблон на Joomla3
Хочу сделать его адаптивным
Подключаю медиа-запросы а они не работают (в head добавил meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″ /> и подключил css media файл)
Подскажите как правильно это сделать
Код

  baseurl ?>/templates/conversetlite/css/tdefaut.css" type="text/css" media="all" /> baseurl ?>/templates/conversetlite/css/box.css" type="text/css" media="all" />        baseurl ?>/templates/conversetlite/css/media.css" type="text/css" media="max-width: 700px" /> baseurl; ?>/templates/template; ?>/favicon.gif" />        
  • Вопрос задан более трёх лет назад
  • 7030 просмотров

2 комментария

Оценить 2 комментария

CSS: Правило @media

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

Синтаксис

@media тип_устройства and|not|only (медиа_особенности)

Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:

Типы устройств

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

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

/* только для печати */ @media print < /* скрыть меню */ #navigation < display: none; >/* начинать каждую новую страницу с заголовка h1 */ h1 < page-break-before: always; >>

Особенности устройств для медиа запросов

Особенность Описание
aspect-ratio Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
color Определяет количество бит на цвет для устройства. Может иметь префикс «min» или «max».
color-index Указывает количество цветов, которое устройство может отображать. Может иметь префикс «min» или «max».
device-aspect-ratio Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс «min» или «max».
device-height Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
device-width Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс «min» или «max».
grid Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0.
height Указывает высоту области просмотра, например, окно браузера. Может иметь префикс «min» или «max».
monochrome Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс «min» или «max».
orientation Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина).
resolution Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс «min» или «max».
scan Определяет процесс сканирования телевизионных устройств вывода.

width Указывает ширину области просмотра, например, окно браузера. Может иметь префикс «min» или «max».

Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.

Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:

@media screen and (min-width: 600px) <>

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

@media (max-width: 500px) and (min-aspect-ratio: 1/1) <>

Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.

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

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

@media (min-width: 700px), (orientation: landscape) <>

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

@media not screen and (device-width: 800px) <>

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

/* Не работает в старых браузерах */ @media only screen and (min-width: 600px) <>

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Что такое медиа запросы CSS и для чего они нужны

Статья также доступна на украинском (перейти к просмотру).

Оглавление:

  • Когда целесообразно их применение
  • Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS
  • Как записать медиа запрос в общем CSS файле
  • Рассмотрим синтаксис написания медиа запросов
  • Примеры написания медиа запросов
  • Выводы

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

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

Также необходимо соблюдать нормы по Core Web Vitals.

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

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

Когда целесообразно их применение

Страница сверстана в несколько колонок

Трех колоночный дизайн достаточно часто встречается в HTML верстке.

Однако, если на широком мониторе, компа или ноутбука, он будет смотреться отлично, со смартфона это будет очень неудобно и некрасиво.

Необходимо “конвертировать” эти три колонки в одну.

Различная величина шрифтов

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

Необходимо задать отдельные стили для мобильных устройств.

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

Различные отступы между блоками и полями

Требования по margin и padding для мобильных, компьютеров и планшетов разные.

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

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

Подробнее о такой оптимизации, а также об оптимальном расстоянии между блоками для мобильной верстки смотрите по указанной ссылке.

Избежание горизонтальной прокрутки

Если Вы укажите фиксированную ширину блока, например width=960px, то на широкоугольном мониторе страница будет выглядеть красиво и удобно. А вот на смартфонах и других мониторах возникнет горизонтальная прокрутка. Поэтому для каждого типа устройства следует указывать свою ширину.

Или воспользуйтесь свойствами CSS max-width, min-width.

Удобство навигации

Панель управления и меню сайтов десктопных компьютеров и смартфонов — это разные вещи. Поэтому навигация для компьютеров и смартфонов должны реализовываться по-разному.

Ненужные элементы для мобильной верстки

Некоторые элементы, которые используются для десктопнной версии сайта, в мобильной версии практически не используются и не нужны. Применяйте свойство display:none при применении медиа запросов CSS и Вы уберете ненужные для мобильной версии блоки.

Разрешение экрана в наше время колеблется от 320 px для смартфонов до 2560 px для широкоугольных мониторов.

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

Оба способа равнозначны.

Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS

На картинке ниже показан пример подключения медиа запросов, находящиеся в отдельном, собственном CSS файле.

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

href=«/assets/mobile.css — указываем путь к файлу CSS со стилями для данного медиа запроса;

Так стили следует записывать, если они разнесены в разные CSS файлы.

Ключевое слово “@media. ” с условиями по нему писать не нужно.

Как записать медиа запрос в общем CSS файле

Если же все стили записаны в одном файле, то медиа запрос необходимо записать после всех стилей CSS, потому что в противном случае они будут переписывать его.

Не забудьте про ключевое слов “@media” и условия по нему.

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

Типы устройств, для которых указано это правило:

  • screen — тип устройства, на котором будет применяться это правило. В данном случае это дисплей (экран);
  • print — принтер или режим предварительного просмотра страницы перед печатью;
  • all — все типы устройств;
  • speech — гаджеты, которые читают контент с экрана (скринридеры).

Условия медиа запросов разделяются основными логическими операторами:

  • and — требуется выполнения всех указанных условий;
  • запятая “,” — требуется выполнения одного из указанных условий;
  • not — отрицание указанного условия. Т.е. если указанное условие не выполняется.

В круглых скобках указываются медиа функции. Это простые функции, которые воспринимаются как правило.

Для указания размеров существует 7 основных значений:

  • min-width;
  • max-width;
  • width;
  • min-height;
  • max-height.
  • height.

Для указания ориентации мобильного устройства:

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

Самые распространенные значения — это min-width, max-width, когда нужно применить стили под определенное разрешение экрана смартфона.

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

Рассмотрим подробнее в примерах медиа функции, которые задаются под определенные условия по ширине браузера, дисплея.

Для удобства их можно копировать прямо в CSS стили вместе с комментариями.

@media screen and (max-widht:1080px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>

/*Данное правило предназначено для дисплеев/браузеров с шириной не более 1080 px. Если ширина экрана будет более 1080 px, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (max-width: 1920px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>

/*Данное правило предназначено для дисплеев/браузеров с шириной более 1920 px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (min-width: 1080px) and (max-width: 1920px) 

/*Данное правило предназначено для дисплеев/браузеров с шириной более 1080px и менее 1920px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (min-height: 720px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>

/*Данное правило предназначено для дисплеев/браузеров с высотой 720 px. Если высота экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (orientation: landscape)
/* При альбомном (горизонтальном) отображении сайта его блоки будут отображаться в строку */
> @media (orientation: portrait) < ;body < flex-direction: column; >>

/* При портретном (вертикальном) отображении сайта его блоки будут отображаться вертикально */

Медиа запросы чаще всего следует применять, если при проверке возникают следующие проблемы:

  • Шрифт слишком мелкий;
  • Блоки расположены слишком близко;
  • Появляется горизонтальная прокрутка.

Выводы

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

Из написанного выше можно сделать следующие выводы по медиа выражениям:

  • Запрос состоит из ключевого слова @media, одного или нескольких условий с логическими операторами для их комбинирования и CSS стилей, которые необходимо применить, в случае выполнения условий;
  • Самые распространенные условия — это min-width, max-width;
  • Выражения в общих CSS файлах необходимо записывать после всех стилей;
  • Выражения с большим объемом CSS стилей записывайте в отдельный файл, с привязкой ссылки на него в основном HTML документе. При этом ключевое слово @media с фигурными скобками к нему в этом отдельном файле писать не нужно, только CSS стили;
  • Используйте выражения для оптимизации мобильной верстки, недопущения горизонтальной прокрутки, оптимизации размера шрифтов.

При написании этой статьи использовались материалы от: Александра Мальцева, видео блогов Web Developer Blog, WebDev.

Подписывайтесь на наш телеграмм — канал t.me/freehostua, чтобы быть в курсе новых полезных материалов. Смотрите наш Youtube канал на youtube.com/freehostua.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *