Как работает медиазапрос, если у всех устройств одинаковое разрешение, хотя размер экрана разный?

@Fatmarmelad · Регистрация: 20.02.2016

Author24 — интернет-сервис помощи студентам

Доброго времени суток!
Медиазапросы работают при заданных размерах окна браузера. Например, для смартфона

CSS

1	@import url(css/small.css) (max-width:320px);

Но если разрешение экрана смартфона (планшета) 1920х1080, это значит, что ширина окна браузера может быть 1920/1080 px.
Как же тогда работает медиазапрос?

@Qwerty_Wasd · 18.11.2018, 20:07

Fatmarmelad, разрешение экрана !=== размер.

Разрешение — величина, определяющая количество точек (элементов растрового изображения) на единицу площади (или единицу длины). Более высокое разрешение (больше элементов) обычно обеспечивает более точные представления оригинала изображения.

https://ru.wikipedia.org/wiki/... 1%80%D0%B0

@Fatmarmelad · 18.11.2018, 22:33 **[ТС]**

Qwerty_Wasd, но есть же физические пиксели, как элементы дисплея. И если пишется
(max-width:320px); это и есть те самые пиксели, или нет?

@Qwerty_Wasd · 18.11.2018, 22:54

Fatmarmelad, правильно - аппаратный пиксель. Да в медиа-запросах указан размер в аппаратных пикселях. Это размер экрана.

@Fatmarmelad · 18.11.2018, 22:58 **[ТС]**

Qwerty_Wasd, может Вы подскажете, как определить размер экрана монитора в пикселях? Смотрю в характеристики мониторов, смартфонов. Везде указано разрешение.

Сколько пикселей у экрана по ширине/высоте?

@Qwerty_Wasd · 18.11.2018, 23:17

Fatmarmelad, я выражусь еще точнее - размер вьюпорта. Его не надо высчитывать. Его медиа-запрос отследит.
Вот смотрите, у Вас допустим стоит разрешение экрана 1920х1080. Открыли браузер на весь экран - размер видимой части вкладки(вьюпорта) будет равен разрешение экрана минус рамка окна и тому подобное. Вы начинаете изменять размер браузера. Размер вьюпорта изменился - стал меньше по высоте и ширине. Но разрешение экрана как было 1920х1080, так и осталось. Вот для того чтобы определить вид и поведение страницы на определенных размерах вьюпорта, используют медиа-запросы. Так надеюсь стало понятнее?

@Fatmarmelad · 19.11.2018, 09:41 **[ТС]**

Qwerty_Wasd, Вы имеете ввиду, что в медиазапросе указываются не аппаратные пиксели, а условные, когда за один пиксель может приниматься несколько аппаратных пикселей?

@Qwerty_Wasd · 19.11.2018, 18:31

Fatmarmelad, нет. Я имел ввиду ровно то, что написал. И не условный, а референсный пиксель.
Те пиксели что указываются в CSS - css-пиксели. Они имеют разный контекст применения.
При указании размеров в медиазапросах - контекст аппаратного, ибо парсится размер вьюпорта.
При указании например размеров элементов - контекст референсного, вот он может состоять из матрицы аппаратных. При transform: scale например. Все это за Вас высчитывает и понимает АПИ клиента.
Например указав мета

HTML5

1	<meta name="viewport" content="width=device-width, initial-scale=1">

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

Вдогонку - https://developers.google.com/... e-viewport

@Fatmarmelad · 19.11.2018, 19:32 **[ТС]**

Qwerty_Wasd,
то есть в запросе ниже указывается референсный пиксель (если я не указываю initial-scale=1)?

CSS

1	@import url(css/small.css) (max-width:320px);

@Qwerty_Wasd · 19.11.2018, 19:42

Fatmarmelad,

Сообщение от Qwerty_Wasd

При указании размеров в медиазапросах - контекст аппаратного, ибо парсится размер вьюпорта.

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.11.2018, 20:07	2
	Fatmarmelad, разрешение экрана !=== размер. Разрешение — величина, определяющая количество точек (элементов растрового изображения) на единицу площади (или единицу длины). Более высокое разрешение (больше элементов) обычно обеспечивает более точные представления оригинала изображения. https://ru.wikipedia.org/wiki/... 1%80%D0%B0 0

@Fatmarmelad 34 / 10 / 2 Регистрация: 20.02.2016 Сообщений: 1,557
	18.11.2018, 22:33 [ТС]	3
	Qwerty_Wasd, но есть же физические пиксели, как элементы дисплея. И если пишется `(max-width:320px);` это и есть те самые пиксели, или нет? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.11.2018, 22:54	4
	Fatmarmelad, правильно - аппаратный пиксель. Да в медиа-запросах указан размер в аппаратных пикселях. Это размер экрана. 0

@Fatmarmelad 34 / 10 / 2 Регистрация: 20.02.2016 Сообщений: 1,557
	18.11.2018, 22:58 [ТС]	5
	Qwerty_Wasd, может Вы подскажете, как определить размер экрана монитора в пикселях? Смотрю в характеристики мониторов, смартфонов. Везде указано разрешение. Сколько пикселей у экрана по ширине/высоте? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	18.11.2018, 23:17	6
	Fatmarmelad, я выражусь еще точнее - размер вьюпорта. Его не надо высчитывать. Его медиа-запрос отследит. Вот смотрите, у Вас допустим стоит разрешение экрана 1920х1080. Открыли браузер на весь экран - размер видимой части вкладки(вьюпорта) будет равен разрешение экрана минус рамка окна и тому подобное. Вы начинаете изменять размер браузера. Размер вьюпорта изменился - стал меньше по высоте и ширине. Но разрешение экрана как было 1920х1080, так и осталось. Вот для того чтобы определить вид и поведение страницы на определенных размерах вьюпорта, используют медиа-запросы. Так надеюсь стало понятнее? 0

@Fatmarmelad 34 / 10 / 2 Регистрация: 20.02.2016 Сообщений: 1,557
	19.11.2018, 09:41 [ТС]	7
	Qwerty_Wasd, Вы имеете ввиду, что в медиазапросе указываются не аппаратные пиксели, а условные, когда за один пиксель может приниматься несколько аппаратных пикселей? 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	19.11.2018, 19:42	10
	Fatmarmelad, Сообщение от Qwerty_Wasd При указании размеров в медиазапросах - контекст аппаратного, ибо парсится размер вьюпорта. 0

Опции темы