dpi в CSS


Содержание

CSS: Правило @media

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

Синтаксис

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

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

Тип Описание
all Используется для всех типов устройств.
aural Используется для синтезаторов речи и звука.
braille Используется для тактильной обратной связи устройств Брайля.
embossed Используется для принтеров Брайля.
handheld Используется для небольших или портативных устройств.
print Используется для принтеров
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 По умолчанию. Используется для всех устройств типа носителя
print Используется для принтеров
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 >Значение считается устаревшим.
print Предназначен для печатных страниц и для режима предварительного просмотра печати.
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 Используется для небольших или портативных устройств.
print Используется для принтеров
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 просто проигнорируют.

Илон Маск рекомендует:  Шаблон сайта коммуникаций HTML, CSS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL