CSS: Правило @media
CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.
Синтаксис
Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:
Типы устройств
Тип | Описание |
---|---|
all | Используется для всех типов устройств. |
aural | Используется для синтезаторов речи и звука. |
braille | Используется для тактильной обратной связи устройств Брайля. |
embossed | Используется для принтеров Брайля. |
handheld | Используется для небольших или портативных устройств. |
Используется для принтеров | |
projection | Используется для презентаций, таких как слайды. |
screen | Используется для экранов компьютеров, планшетов, смартфонов и т.д. |
speech | Используется для речевых браузеров. |
tty | Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы. |
tv | Используется для телеэкранов. |
К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:
Особенности устройств для медиа запросов
Особенность | Описание |
---|---|
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:
Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:
Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.
Логические операторы
В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.
Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:
Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:
Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.
Правильный сниппет медиа выражений для retina
Я видел разные способы определения мониторов retina. Одни объемные, другие наоборот. Разберемся какие из media quires изпользовать.
Правильное решение для retina (2x)
Этот сниппет определяет только ретина дисплеи (2х), но есть еще и дисплеи с device-pixel-ratio больше 1 и меньше 2 — мобильные телефоны. Для них лучше тоже показывать оптимизированные под retina изображения.
У себя в сниппете я проверяю на 120dpi :
Какой из них использовать решать вам. Предупрежу, что если dpi больше 1 и меньше 2, то это мобильное устройство. А если загружать для мобильного устройства оптимизированную под ретина дисплеи графику, то сайт будет дольше загружаться. Что важно для пользователей мобильных устройств.
Почему эти правила
Ответ найдем в поддержке браузерами этих свойств. Открываем caniuse и видим следующее:
Поддержка Media Queries в браузерах
Зеленые столбцы и столбцы с номером 1 — поддерживают min/max resolution с единицами измерения dpi , а столбцы с номером 3 — поддерживают -webkit-device-pixel-ratio . То есть нам требуются только эти два свойства.
CSS @media Rule
Пример
Измените цвет фона элемента на «lightblue», если окно обозревателя 600px широко или менее:
Подробнее примеры ниже.
Определение и использование
Правило @media используется в запросах мультимедиа для применения различных стилей для различных типов носителей/устройств.
Мультимедийные запросы можно использовать для проверки многих вещей, таких как:
- Ширина и высота видового экрана
- Ширина и высота устройства
- ориентация (планшет/телефон в альбомном или книжном режиме?)
- Разрешение
Использование мультимедийных запросов — популярный способ доставки адаптированной таблицы стилей (Адаптивный веб-дизайн) к настольным компьютерам, ноутбукам, планшетам и мобильным телефонам.
Можно также использовать запросы мультимедиа, чтобы указать, что определенные стили предназначены только для печатных документов или для чтения с экрана (MediaType: печать, экран или речь).
В дополнение к типам носителей, есть также функции мультимедиа. Функции мультимедиа предоставляют более подробные сведения о мультимедийных запросах, позволяя тестировать конкретную функцию агента пользователя или устройства отображения. Например, можно применить стили только к тем экранам, которые больше или меньше определенной ширины.
Поддержка браузера
Номера в таблице указывают первую версию обозревателя, полностью поддерживающую правило @media.
Свойство | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
Синтаксис CSS
значение не, только и и ключевые слова:
Нет: Ключевое слово NOT возвращает значение всего мультимедийного запроса.
только: Ключевое слово only предотвращает применение указанных стилей к старым обозревателям, которые не поддерживают запросы мультимедиа с функциями мультимедиа. Он не влияет на современные браузеры.
и: Ключевое слово and объединяет мультимедийный объект с типом носителя или другими мультимедийными функциями.
Все они необязательны. Однако при использовании Not или onlyнеобходимо также указать тип носителя.
Можно также иметь различные таблицы стилей для различных носителей, например:
Media Types
Значение | Описание |
---|---|
all | По умолчанию. Используется для всех устройств типа носителя |
Используется для принтеров | |
screen | Используется для компьютерных экранов, планшетов, смарт-телефонов и т.д. |
speech | Используется для скринреадерс, что «читает» страницы вслух |
Media Features
Значение | Описание |
---|---|
any-hover | Позволяет ли любой доступный механизм ввода пользователю навести курсор на элементы? (Добавлено в Media запросы уровень 4) |
any-pointer | Есть ли доступный механизм ввода указывающего устройства, и если да, то насколько он точен? (Добавлено в Media запросы уровень 4) |
aspect-ratio | Соотношение между шириной и высотой видового экрана |
color | Число битов на компонент цвета для устройства вывода |
color-gamut | Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (Добавлено в Media запросы уровень 4) |
color-index | Количество цветов, которые может отображать устройство |
grid | Является ли устройство сеткой или растровым изображением |
height | Высота видового экрана |
hover | Позволяет ли основной входной механизм пользователю навести курсор на элементы? (Добавлено в Media запросы уровень 4) |
inverted-colors | Браузер или базовая операционная система переворачивают цвета? (Добавлено в Media запросы уровень 4) |
light-level | Текущий уровень освещенности (добавлен в Media-запросах уровень 4) |
max-aspect-ratio | Максимальное соотношение между шириной и высотой области отображения |
max-color | Максимальное число битов на компонент цвета для устройства вывода |
max-color-index | Максимальное количество цветов, которое может отображать устройство |
max-height | Максимальная высота области отображения, например окно обозревателя |
max-monochrome | Максимальное количество битов на «цвет» на монохромном устройстве (в оттенках серого) |
max-resolution | Максимальное разрешение устройства с помощью dpi или DPCM |
max-width | Максимальная ширина области отображения, например окно обозревателя |
min-aspect-ratio | Минимальное соотношение между шириной и высотой области отображения |
min-color | Минимальное количество битов на компонент цвета для устройства вывода |
min-color-index | Минимальное количество цветов, которое может отображать устройство |
min-height | Минимальная высота области отображения, например окно обозревателя |
min-monochrome | Минимальное количество битов на «цвет» на монохромном устройстве (в оттенках серого) |
min-resolution | Минимальное разрешение устройства с помощью dpi или DPCM |
min-width | Минимальная ширина области отображения, например окно обозревателя |
monochrome | Количество битов на «цвет» на монохромном устройстве (в оттенках серого) |
orientation | Ориентация видового экрана (ландшафтный или книжный режим) |
overflow-block | Как устройство вывода обрабатывает содержимое, переполненное видовым экраном вдоль оси блока (Добавлено в Media запросы уровень 4) |
overflow-inline | Можно прокручивать содержимое, переполненное видовым экраном вдоль встроенной оси (Добавлено в Media-запросах уровень 4) |
pointer | Является ли основной входной механизм указывающим устройством, и если да, то насколько он точен? (Добавлено в Media запросы уровень 4) |
resolution | Разрешение выходного устройства с помощью dpi или DPCM |
scan | Процесс сканирования устройства вывода |
scripting | Доступны ли скрипты (например, JavaScript)? (Добавлено в Media запросы уровень 4) |
update | Как быстро устройство вывода может изменить внешний вид содержимого (Добавлено в Media запросы уровень 4) |
width | Ширина видового экрана |
Другие примеры
Пример
Скрытие элемента, если ширина обозревателя 600px шириной или меньше:
Пример
Используйте медиакуериес, чтобы задать цвет фона для лаванды, если видовой экран 800 пикселей в ширину или шире, чтобы светлозеленый, если видовой экран находится между 400 и 799 пикселей в ширину. Если видовой экран меньше 400 пикселей, цвет фона лигхтблуе:
body <
background-color: lightblue;
>
@media screen and (min-width: 400px) <
body <
background-color: lightgreen;
>
>
@media screen and (min-width: 800px) <
body <
background-color: lavender;
>
>
Пример
Создание адаптивного меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):
Пример
Используйте запросы мультимедиа для создания адаптивного макета столбца:
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) <
.column <
width: 50%;
>
>
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) <
.column <
width: 100%;
>
>
Пример
Используйте запросы мультимедиа для создания адаптивного веб-сайта:
Пример
Мультимедийные запросы также можно использовать для изменения макета страницы в зависимости от ориентации браузера. Вы можете иметь набор свойств CSS, которые будут применяться только в том случае, если окно обозревателя шире, чем его высота, так называемая «Landscape» ориентация.
Используйте цвет фона лигхтблуе, если ориентация находится в альбомном режиме:
Пример
Используйте медиакуериес, чтобы задать цвет текста зеленым цветом, когда документ отображается на экране, и черным при печати:
Пример
Список разделенных запятыми: добавьте дополнительный мультимедийный запрос к уже существующему, используя запятую (это будет вести себя как оператор OR):
Есть ли способ использовать DPI в медиа-запросах css вместо px
Количество пикселей по ширине и высоте не всегда говорит всю историю. Это отлично подходит для добавления или удаления элементов с экрана, но не совсем подходит для установки правильного изображения. С дисплеем retina на MBP, окно браузера, установленное на половину экрана, будет иметь такое же количество пикселей по ширине, как и большинство современных компьютеров. Тем не менее, отображаемые изображения, вероятно, будут слишком маленькими, учитывая более высокий DPI.
Есть ли способ изменить изображения на основе DPI, а не количества пикселей по ширине и высоте?
3 ответа
Вы можете сделать любое:
То, что вы ищете, — это соотношение пикселей устройства. Потому что такие вещи, как iPhone дисплей, как экран 320px, но с макетом 640px (соотношение пикселей 2). В запросах мультимедиа используйте «device-pixel-ratio». Хотя я бы удостоверился, что все еще использую префиксы поставщика.
Есть также и -webkit-image-set функции css, но они, кажется, поддерживаются только Safari/Chrome/Opera. Образец:
Я не уверен, что примеры в принятом ответе Moin Zaman работают на IE/Firefox. Вероятно, необходимо использовать «min-resolution» :
Условия CSS для разрешений экрана
Популярные статьи
В разработке современного дизайна большое внимание уделяется отображению сайта на различных устройствах: мониторах компьютера, планшетах, телефонах и других устройств, с которых возможен выход в интернет.
До недавнего времени, разработчикам и верстальщикам сайтов приходилось бороться с кроссбраузерностью — отображением сайта одинаково при просмотре сайта в различных браузерах : Opera, Mozilla, Chromу и конечно же, так нелюбимый всеми верстальщиками — Internet Explorer.
С внедрением в жизнь мобильных технологий и популиризацией мобильных устройств, у верстальщиков и разработчиков сайтов появилась новая проблема — правильное отображение сайта на различных мобильных устройствах, с различным разрешением экрана. Но на спасение разработчиков в CSS3 появилась замечательная возможность media queries — при помощи различных условий, задавать правила css для определенной группы устройств, с различным разрешением. Ниже приведены все правила, при которых можно задать условия в СSS3 для определения ширины экрана, с которого просматривается сайт.
/* monitors and laptops */
@media screen and (min-width: 1240px) <>
/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px) <>
@media screen and (min-width: 768px) and (max-width: 1024px) <>
/* mobile */
@media screen and (max-width: 768px) <>
/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) <>
/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) <>
/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) <>
/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) <>
/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) <>
/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) <>
/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)<>
/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) <>
/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) <>
/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) <>
/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) <>
/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) <>
/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) <>
/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) <>
/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) <>
/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) <>
/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) <>
/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) <>
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) <>
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) <>
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) <>
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) <>
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px)<>
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait)<>
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape)<>
/* CSS для Retina устройств */ @media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min—moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)*>
Надеемся, что эта информация была вам полезна в разработуке вашего сайта и ваш сайт теперь отображается отлично на всех экранах и устройствах!
А если у вас нет достаточных знаний в самостоятельном создании сайта, доверьте это дело профессионалам! Обращайтесь, и мы вам обязательно поможем с подключением иконочного шрифта.
Коментарии
К этой статье пока нет комментариев. Оставь комментарий первым!
Настройка мышки в CSS
На чувствительность мыши в игре влияют такие параметры как настройка DPI у мыши.
DPI (Dots per inch) или, если правильно – CPI (Counts per inch) – это термин, описывающий количество пикселей, которые курсор проходит при сдвиге мыши (фиксировании сенсором перемещения) на 1 дюйм. Второе определение является более верным по причине того, что оно означает: «сдвигов на», а DPI – «Точек на дюйм», что характерно для описания четкости изображения. Но так как первая аббревиатура пользуется значительно большей популярностью, то в тексте будет использоваться именно она.
DPI мыши – что это такое и как работает?
Одна из характеристик, которая пишется на упаковке мыши – это DPI. В качестве ее значения, в зависимости от модели устройства, может быть указано – 600, 800, 1600 и выше
Количество точек при разном значении ДПИ
Чем выше значение DPI, тем наиболее точным является сенсор оптической мыши, отвечающий за фиксирование перемещения. Соответственно при перемещении мыши по поверхности курсор на экране будет более точно и плавно повторять это движение.
Если значение DPI оптического сенсора мыши соответствует, например, 1600, то это означает, что при перемещении на 1 дюйм курсор может сдвинуться на 1600 пикселей. Поэтому чем выше это значение, тем курсор на экране способен быстрее двигаться.
Мышь с каким DPI лучше выбрать?
Выбор мыши обуславливается тем, в каких условиях и как человек будет ее использовать. В первую очередь нужно брать во внимание разрешение экрана, курсором на котором будет управлять мышь. Если дисплей имеет HD матрицу, то хватит устройства с сенсором на 600-800 DPI. Если экран имеет FullHD (или близкое к нему, например 1600 на 900) разрешение, то подойдет мышь с DPI равным 1000. Курсором на QuadHD (2560 на 1500) наиболее удобно управлять посредством устройства с оптическим сенсором на 1600 DPI.
DPI считывание при разных значениях
Теперь разберемся с областью применения. Пользователям, которым нужна высокая точность и плавность (например, геймерам и дизайнерам), нужна мышь с более высоким DPI. Все остальные могут брать себе мышь исходя из разрешения экрана (критерии указаны выше).
Геймеры и дизайнеры, конечно, тоже должны покупать устройства исходя из четкости дисплея, но с некоторыми поправками. Например, для FullHD рекомендуется брать мышь с разрешением сенсора в 1600 DPI. Надеюсь вы поняли что это DPI в компьютерной мышке, теперь поговорим как изменить его значение.
Как изменить значение DPI для оптической мыши?
На некоторых более дорогих устройствах прямо на корпусе имеется переключатель, который позволяет быстро изменять разрешение сенсора. Однако если таковой отсутствует, DPI все равно можно изменить.
Чтобы поменять значение DPI с целью ускорить или замедлить перемещение курсора необходимо зайти в настройки операционной системы.
В Windows для этого требуется открыть «Панель управления», зайти в категорию «Оборудование и звук» и выбрать пункт «Мышь».
В открывшемся окне следует перейти на вкладку «Параметры указателя».
Там найти пункт «Перемещение» и в подпункте «Задайте скорость перемещения указателя» переместить ползунок в определенное место: право – быстрее, лево – медленнее.
Клик по «применить», после чего можно проверять скорость перемещения указателя.
Если она не устраивает, то придется повторить описанную процедуру еще раз.
Нужно понимать, что если значение это DPI, установленное программно, будет выше аппаратных возможностей сенсора, курсор начнет передвигаться с рывками. Это, как правило, не критично для обычных пользователей, но может доставлять неприятности геймерам и дизайнерам. Если информации в статье вам оказалось мало я советую посмотреть видео ниже, в котором подробно описано что это такое показатель DPI.
такие как: Инверсия мыши, фильтр мыши, чувствительность мыши (или сенса в простонародье), прямое подключение, ускорение движение.
Уровень Dpi напрямую зависит от разрешения монитора (1024 x 768; 1280 x 1024; 1920 x 1080 и т.п.)
Настройка чувствительности (или сенсы) в игре.
После настройки мышки (выставления необходимого Вам параметра Dpi) заходим в игру, и пробуем настроить такой минимальный параметр чувствительности (или сенсы), увеличивая каждый раз его параметр на 0,01 значения, при котором Вы смогли бы сделать разворот на 180 градусов за одно движение мышки.
После того, как вы нашли идеальную чувствительность ни в коем случае не меняйте ее, и наигрывайте много часов, что бы полностью привыкнуть к данному параметру.
Если Вы просто обновили мышку, то можно воспользоваться калькулятором Dpi, где:
Current DPI — показатель DPI прежней мышки
Current Sensitivity — предыдущий настройки чувствительности мыши в игре (например: 1.7)
New DPI — текущие настройки Dpi новой мышки
Далее нажимаем Calculate и получаем New Sensitivity (или новый параметр чувствительности мыши в игре)
Не менее важный вопрос, ускорение мыши. Это когда зависимость скорости движения курсора от скорости движения мыша не прямолинейна, а увеличивается по параболе. Грубо говоря, чем сильнее вы двигаете мышь, тем сильнее ускоряется курсор. Рекомендую этот параметр отключить.
Так же рекомендую параметр скорость опроса мыши выставить на максимум. Т.е. если у вас стоит параметр скорости опроса мыши 1000 Гц это значит, что компьютер обновит данные с мышки 1000 раз за одну секунду, а если 100 Гц, значит 100 раз.
Изменено 21 января пользователем DRAGUN
CSS правило @media
Определение и применение
CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.
Поддержка браузерами
Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|
@media | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
CSS синтаксис:
Давайте детально разберем из чего состоит синтаксис этого правила.
Логические операторы
Вы можете комбинировать медиазапросы с использованием логических операторов:
Значение | Описание |
---|---|
and | Оператор and («И») используется для объединения нескольких медиазапросов в один. |
not | Оператор not («Логическое НЕ») обращает результат — если медиазапрос был истинным без «not», то он станет ложным, и наоборот. |
only | Оператор only («Только») может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор. |
, | Оператор «,» позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает «true» (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR («ИЛИ» ). |
Устройства (media type)
Вы можете использовать медиазапросы для конкретных типов устройств:
Значение | Описание |
---|---|
all | Подходит для всех типов устройств. Это значение по умолчанию. |
aural | Предназначено для речевых синтезаторов. Значение считается устаревшим. |
braille | Устройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим. |
embossed | Устройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим. |
handheld | Предназначено для портативных устройств (маленький экран и ограниченная полоса пропускания — bandw >Значение считается устаревшим. |
Предназначен для печатных страниц и для режима предварительного просмотра печати. | |
projection | Устройства проекционного типа (проекторы). Значение считается устаревшим. |
screen | Экраны компьютера. |
speech | Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух). |
tty | Устройства, которые используют набор символов фиксированной ширины, например, телетайпы или терминалы. Значение считается устаревшим. |
tv | Устройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим. |
Мультимедийные функции (media function)
Значение | Описание |
---|---|
aspect-ratio | Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем). |
color | Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент. |
color-index | Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
device-aspect-ratio | Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio : 5/4 (соотношение пять к четырем). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
device-height | Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
device-width | Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
grid | Определяет основано ли выходное устройство на сеточной системе (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно . |
height | Задает высоту области просмотра (используются единицы измерения CSS). |
max-aspect-ratio | Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
max-color | Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения. |
max-color-index | Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
max-device-aspect-ratio | Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из «Media Queries Level 4» . |
max-device-height | Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
max-device-width | Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
max-height | Задает максимальную высоту области просмотра (используются единицы измерения CSS). |
max-monochrome | Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа. |
max-resolution | Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ). |
max-width | Задает максимальную ширину области просмотра (используются единицы измерения CSS). |
min-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
min-color | Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения. |
min-color-index | Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
min-device-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из «Media Queries Level 4» . |
min-device-height | Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
min-device-width | Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из «Media Queries Level 4» . |
min-height | Задает минимальную высоту области просмотра (используются единицы измерения CSS). |
min-monochrome | Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа. |
min-resolution | Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ). |
min-width | Задает минимальную ширину области просмотра (используются единицы измерения CSS). |
monochrome | Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа. |
orientation | Определяет, находится ли область просмотра в режиме альбомной ориентации — экран шире, чем высота, или в портретной ориентации — высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait . |
resolution | Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ). |
scan | Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка — ( interlace ), прогрессивная развертка ( progressive ). |
width | Задает ширину области просмотра (используются единицы измерения CSS). |
Мультимедийные функции (Media Queries Level 4)
В «Media Queries Level 4» добавлены следующие новые функции, которые, возможно, будут реализованы в браузерах:
- scripting (определяет используются ли языки сценариев, такие как JavaScript в текущем документе).
Значения:- enabled (скрипты доступны в текущем документе).
- initial-only (скрипты доступны только во время первоначальной загрузке страницы, а не после).
- none (скрипты полностью недоступны в текущем документе).
- pointer (используется для запроса о наличии и правильности указывающего устройства, такого как мышь. Если устройство имеет несколько механизмов ввода, то функция указателя должна отражать характеристики «первичного» механизма входного сигнала, который определяется браузером пользователя).
Значения:- none (основной механизм ввода устройства не включает в себя указательное устройство).
- coarse (основным механизмом ввода устройства входит указательное устройство ограниченной точности, например, сенсорные экраны и системы обнаружения движения по типу Kinect — периферийные устройства для Xbox).
- fine (основной механизм ввода устройства включает в себя точное указывающее устройство, например, мыши, тачпады и устройства для рисования стилусом).
- any-pointer (аналогичен pointer , но используется для запроса возможности любого доступного механизма ввода).
Значения: none | coarse | fine - hover (используется для запроса на способность пользователя навести курсор на элемент на странице. Если устройство имеет несколько механизмов ввода, то функция должна отражать характеристики «первичного» механизма входного сигнала, который определяется браузером пользователя).
Значения:- none (указывает, что основное указательное устроство не может навести курсор на элемент на странице, например, сенсорные экраны и экраны, которые используют для рисования стилусом).
- hover (указывает, что основное указательное устроство может навести курсор на элемент на странице, например, мыши и устройства с физической точкой на экране, как контроллер Nintendo для Wii.).
- any-hover (аналогичен hover , но используется для запроса возможности любого доступного механизма наведения).
Значения: none | hover - color-gamut (описывает примерный диапазон цветов, которые поддерживаются UA и выходными устройствами).
Значения:- srgb (выходное устройство может поддерживать примерно диапазон sRGB или более).
- p3 (выходное устройство может поддерживать примерно диапазон, указанный DCIP3 цветового пространства или более).
- rec2020 (выходное устройство может поддерживать примерно диапазон, указанный в ITU-R рекомендации BT.2020 цветового пространства или более).
- update (функция средства обновления используется для запроса на способность устройства вывода изменить внешний вид содержимого после его рендеринга).
Значения:- none (макет не может быть обновлен, например, для документов, напечатанных на бумаге).
- slow (макет может динамически меняться в соответствии с обычными правилами CSS, но выходное устройство не в состоянии достаточно быстро отобразить изменения, чтобы восприниматься как плавная анимация, например: e-ink экраны).
- fast (макет может динамически изменяться в соответствии с обычными правилами CSS и выходное устройство не ограничено в скорости, поэтому такие эффекты как CSS анимация могут быть использованы, например: экраны компьютера.).
- overflow-block (определяет как выходные устройства обрабатывают содержимое, которое не помещается в область просмотра по оси блока)
Значения:- none (любое переполнение контента просто не отображается, например, рекламные щиты).
- scroll (позоляет пользователю прокрутить содержание, например, экраны компьютеров).
- optional-paged (позволяет пользователям прокрутить переполненное содержимое, например, слайд-шоу).
- paged (содержимое разделено на отдельные страницы, содержимое, выходящее за пределы одной страницы в оси блока отображается на следующей странице, например, принтеры или устройства для чтения).
- overflow-inline (описывает поведение устройства, когда содержимое превышает начальный содержащий блок по inline оси.)
Значения:- none (любое переполнение контента просто не отображается).
- scroll (позоляет пользователю прокрутить содержание).
Варианты подключения медиазапросов
Подключение медиазапросов с использованием тега
Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:
Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .
Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега
Обратите внимание, что при использовании атрибута media тега 2. Используя CSS правило @media внутри HTML тега
Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:
Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.
Медиазапросы, используемые в Bootstrap 4
В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.
Так как Bootstrap разработан, чтобы быть мобильным в первую очередь, разработчики фреймворка используют несколько медиазапросов для создания разумных точек останова для макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4:
Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4:
В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):
Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.
Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:
Настройка области просмотра
Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
- Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
- Значение w > атрибута 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
Пример использования
Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера — цвет всех элементов черный, а цвет заднего фона белый).
Для просмотра страниц пользователями мы установим следующие CSS стили:
Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:
Окончательный файл CSS будет выглядеть следующим образом:
Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important , которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important .
Другими словами, если мы разместим правило @media print в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):
Теперь свяжем наш файл CSS ( css_pr_media.css ) с документом, используя элемент :
HTML разметка примера:
Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):
Пример использования CSS правила @media (изменение CSS стилей при печати страниц). CSS правила
Соотношение пикселей устройства и пиксель CSS на разных размерах экрана [дубликат]
упоминается каждая статья о мобильной сети, но нигде я не могу найти объяснение того, что именно этот показатель измеряет. Кто-нибудь может спросить, что такое запросы, подобные этой проверке?
4 ответа
Короткий ответ
Соотношение пикселей устройства — это соотношение между физическими пикселями и логическими пикселями. Например, iPhone 4 и iPhone 4S сообщают о соотношении пикселей устройства в 2, потому что физическое линейное разрешение удваивает логическое линейное разрешение.
- Физическое разрешение: 960 x 640
- Логическое разрешение: 480 x 320
[/g16] является физическим линейным разрешением
[/g17] является логическим линейным разрешением
Другие устройства сообщают о различных соотношениях пикселей устройства, включая нецелые. Например, Nokia Lumia 1020 сообщает 1.6667, Samsumg Galaxy S4 сообщает 3, а Apple iPhone 6 Plus сообщает 2.46 (источник: dpilove ) . Но это ничего не меняет в принципе, так как вы никогда не должны проектировать ни одно конкретное устройство.
Обсуждение
«пиксель» CSS даже не определен как «один элемент изображения на некоторый экран «, а скорее как нелинейное угловое измерение угла наблюдения [/g18], которое составляет приблизительно [/g19] дюйма на расстоянии вытянутой руки. Источник: Абсолютные длины CSS
Это имеет большое значение, когда дело доходит до веб-дизайна, например, для подготовки изображений изображений высокой четкости и тщательного применения различных изображения при разных соотношениях пикселей устройства. Вы не захотите заставить низкоуровневое устройство загружать изображение с очень высоким разрешением, только для его локализации.
Если вы застряли с растровыми изображениями, чтобы соответствовать различным соотношениям пикселей устройства, вы должны использовать CSS Media Queries для предоставления различных наборов ресурсов для разных групп устройств. Объедините это с хорошими трюками, такими как background-size: cover , или явно установите процентные значения background-size .
Пример
Таким образом, каждый тип устройства загружает только правильный ресурс изображения. Также имейте в виду, что блок px в CSS всегда работает с логическими пикселями.
Случай для векторной графики
Поскольку появляется все больше и больше типов устройств, становится сложнее предоставить все из них имеют адекватные растровые ресурсы. В CSS запросы на медиа в настоящее время являются единственным способом, а в HTML5 элемент изображения позволяет использовать разные источники для разных мультимедийных запросов, но поддержка по-прежнему не на 100%, поскольку большинство веб-разработчиков по-прежнему вынуждены поддержка IE11 еще некоторое время (источник: caniuse ) .
Если вам нужны четкие изображения для значков, линий, элементов дизайна, которые не являются фотографии, вы должны начать думать о SVG, который прекрасно масштабируется для всех разрешений.
marcedwards / high-dpi-media.css
/* ———————————————————- */ |
/* */ |
/* A media query that captures: */ |
/* */ |
/* — Retina iOS devices */ |
/* — Retina Macs running Safari */ |
/* — High DPI Windows PCs running IE 8 and above */ |
/* — Low DPI Windows PCs running IE, zoomed in */ |
/* — Low DPI Windows PCs and Macs running Firefox, zoomed in */ |
/* — Andro >*/ |
/* — Andro >*/ |
/* — Chrome running on high DPI Macs and PCs */ |
/* — Opera running on high DPI Macs, PCs and mobile devices */ |
/* */ |
/* Please note that that this code assumes you’ll swap a */ |
/* 2× version of your images. If you’d like to supply */ |
/* finer increments, other thresholds might be appropriate. */ |
/* */ |
/* A test for CSS pixel densites can be found here: */ |
/* http://bjango.com/articles/min-device-pixel-ratio/ */ |
/* */ |
/* @marcedwards from @bjango */ |
/* */ |
/* ———————————————————- */ |
@media only screen and ( -webkit-min-device-pixel-ratio : 1.3 ), |
only screen and ( -o-min-device-pixel-ratio : 13 / 10 ), |
only screen and ( min-resolution : 120 dpi ) |
< |
/* Your code to swap higher DPI images */ |
> |
This comment has been minimized.
Copy link Quote reply
richardcornish commented Aug 24, 2012
Extra curly brace at the end?
This comment has been minimized.
Copy link Quote reply
wylieconlon commented Aug 24, 2012
The extra curly brace and dangling comma cause this to fail, so here’s my fork
This comment has been minimized.
Copy link Quote reply
marcedwards commented Aug 25, 2012
Oh yep, you’re both right. Fixed.
This comment has been minimized.
Copy link Quote reply
coliff commented Dec 4, 2012
your media query is brilliant. I’ve started using it for all my projects and it works perfectly.
FYI — it also works with Low DPI Windows & OS X PCs with Firefox zoomed in (tested today with FF 17 on Windows 8 and OS X 10.8.2)
This comment has been minimized.
Copy link Quote reply
marcedwards commented Jan 13, 2013
@coliff Thanks! I’ve updated the comment to include your info.
This comment has been minimized.
Copy link Quote reply
Daizuko commented Feb 4, 2013
Smart idea! Will try this out on my next project.
This comment has been minimized.
Copy link Quote reply
stinoga commented Jul 30, 2013
Awesome media query! What about the new(er) dppx unit? Worth adding yet?
This comment has been minimized.
Copy link Quote reply
iMuFeng commented Feb 18, 2014
I have try this for the firefox on mac retina;
This comment has been minimized.
Copy link Quote reply
chimos commented Jul 7, 2014
Thanks for sharing this, It works really good! However with Chrome v.35 I get this Debug message in the console:
Consider using ‘dppx’ units, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‘dpi’ of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.3), not all, only screen and (min-resolution: 120dpi)
It is not an error nor a warning. Is this something expected? Maybe is something to consider. Hope it helps
Thanks again
This comment has been minimized.
Copy link Quote reply
prasannavigneshr commented Aug 19, 2014
Hi, How to target Galaxy Tab 4 7inch, it uses the same resolution for Samsung Galaxy Tab 4 10 inch 1280*800. I have the media query for 10 inch but, in my 7 inch i tools the CSS of 10inch. How to differentiate the media query in this case. Thanks in advance.
CSS: Правило @media
CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.
Синтаксис
Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:
Типы устройств
Тип | Описание |
---|---|
all | Используется для всех типов устройств. |
aural | Используется для синтезаторов речи и звука. |
braille | Используется для тактильной обратной связи устройств Брайля. |
embossed | Используется для принтеров Брайля. |
handheld | Используется для небольших или портативных устройств. |
Используется для принтеров | |
projection | Используется для презентаций, таких как слайды. |
screen | Используется для экранов компьютеров, планшетов, смартфонов и т.д. |
speech | Используется для речевых браузеров. |
tty | Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы. |
tv | Используется для телеэкранов. |
К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:
Особенности устройств для медиа запросов
Особенность | Описание |
---|---|
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:
Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:
Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.
Логические операторы
В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.
Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:
Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:
Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.