Используя cm в ответных медиа-запросах?

Я использую сантиметр в своих медиа-запросах css, чтобы сделать мой шаблон отзывчивым, в то время как в наши дни у нас есть смартфоны с очень высоким разрешением, что затрудняет фильтрацию пикселей. мой вопрос в том, почему все веб-сайты не используют CM, который делает отзывчивость намного более простой и функциональной? есть что-нибудь, что будет упущено, используя cm, который я не знаю? edit: Я использую min-**device**-width как медиа-запрос.

Ответы

Ответ 1

Я также стремился использовать физические единицы для измерений CSS, так как это имеет большой смысл, особенно для разработки навыков чтения контента длинной формы на всех типах устройств. Но проблема с этим подходом состоит в том, что 1 CSS cm/in абсолютно не совпадает с 1 см/дюйм в реальном мире. Просто попробуйте сделать коробку шириной и высотой 1 см, а затем измерьте рендеринг в разных браузерах, экранах и устройствах. Вы можете быть недовольны.

Основная проблема заключается в том, что все (? well most) устройства отображают физические единицы как (неожиданное) уравнение 1in = 96px (или 1cm = ~ 37.8px). Поэтому, если вы определяете свои единицы или медиа-запросы в см, это фактически означает, что вы определяете их в соотношении ~ 37,8 пикселей, что в большинстве случаев, конечно же, не то, что вы хотите.

Ответ 2

На самом деле нет пользы в использовании cm over px.

Одна из официальных рекомендаций кандидата CSS3 определяет эти абсолютные длины:

unit    definition
‘cm’    centimeters
‘mm’    millimeters
‘in’    inches; 1in is equal to 2.54cm
‘px’    pixels; 1px is equal to 1/96th of 1in
‘pt’    points; 1pt is equal to 1/72nd of 1in
‘pc’    picas; 1pc is equal to 12pt

Поэтому 1 см примерно равно 37.80px. Если ширина экрана устройства составляет 10 см, то в пикселях это примерно 378 пикселей.

Обратите внимание на то, как я сказал "ширина устройства". Медиа-запросы поддерживают 2 разных запроса ширины и высоты: min-width и min-height основаны на разрешении экрана; min-device-width и min-device-height основаны на размере экрана.

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

Ответ 3

Я думаю, это здорово. Даже если сантиметры прямо эквивалентны пикселям (что я не уверен в этом), это более читаемо и имеет больше смысла в их использовании. Я использовал их, но дело в том, что совместимость браузеров не кажется отличной для этих устройств при первом просмотре.

Ответ 4

Правильно, что в spec "'px' равно 1/96th из 1In" BUT В каждом браузере 1px == реальный пиксель на экране.