Короткий ответ
Соотношение пикселей устройства - это соотношение между физическими и логическими пикселями. Например, iPhone 4 и iPhone 4S сообщают о соотношении пикселей устройства 2, потому что физическое линейное разрешение вдвое превышает логическое линейное разрешение.
- Физическое разрешение: 960 х 640
- Логическое разрешение: 480 х 320
Формула:
Куда:
является физическим линейным разрешением
и:
это логическое линейное разрешение
Другие устройства сообщают о различном соотношении пикселей устройства, включая нецелые. Например, Nokia Lumia 1020 сообщает 1.6667, Samsumg Galaxy S4 сообщает 3, а Apple iPhone 6 Plus сообщает 2.46 (источник: dpilove ) . Но это ничего не меняет в принципе, так как вы никогда не должны разрабатывать для какого-то одного конкретного устройства.
обсуждение
CSS «пиксель» даже не определен как «один элемент изображения на экране какого - то», а скорее в качестве нелинейного углового измерения от угла обзора, который составляет примерно дюйм на расстоянии вытянутой руки. Источник: CSS Абсолютные Длины
Это имеет много последствий, когда дело доходит до веб-дизайна, таких как подготовка ресурсов изображений высокой четкости и аккуратное применение различных изображений с разным соотношением пикселей устройства. Вы не хотели бы заставлять устройство низкого уровня загружать изображение с очень высоким разрешением, только чтобы уменьшить его локально. Вы также не хотите, чтобы устройства высокого класса улучшали изображения с низким разрешением для размытого пользовательского опыта.
Если вы застряли с растровыми изображениями, чтобы приспособиться к множеству различных соотношений пикселей устройства, вы должны использовать CSS Media Queries для предоставления разных наборов ресурсов для разных групп устройств. Объедините это с хорошими трюками, такими как background-size: cover
или явно установите background-size
процентные значения.
пример
#element { background-image: url('lores.png'); }
@media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url('hires.png'); }
}
@media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url('superhires.png'); }
}
Таким образом, каждый тип устройства загружает только правильный ресурс изображения. Также имейте в виду, что px
модуль в CSS всегда работает с логическими пикселями .
Чехол для векторной графики
По мере того, как появляется все больше и больше типов устройств, становится все сложнее предоставить всем им адекватные растровые ресурсы. В CSS медийные запросы в настоящее время являются единственным способом, а в HTML5 элемент изображения позволяет вам использовать разные источники для разных медиа-запросов, но поддержка все еще не на 100%, так как большинству веб-разработчиков все еще приходится поддерживать IE11 еще некоторое время ( источник: caniuse ) .
Если вам нужны четкие изображения для иконок, штриховых рисунков, элементов дизайна, которые не являются фотографиями , вам нужно задуматься о SVG, который прекрасно масштабируется для всех разрешений.
width=device-width
я растяну его на весь экран?background-image
, вы можете объединить его с-webkit-background-size:50%
, потому что в противном случае размер изображения будет соответствовать количеству логических пикселей. w3.org/TR/2002/WD-css3-background-20020802/#background-sizebackground-size
хитрость для оптимального использования дисплея.Соотношение пикселей устройства == Соотношение пикселей CSS
В мире веб-разработок соотношение пикселей устройства (также называемое CSS Pixel Ratio) определяет то, как разрешение экрана устройства интерпретируется CSS.
CSS браузера рассчитывает логическое (или интерпретированное) разрешение устройства по формуле:
Например:
Apple iPhone 6s
При просмотре веб-страницы CSS будет думать, что устройство имеет экран с разрешением 375x667, а Media Queries будет отвечать так, как если бы экран был 375x667 . Но визуализированные элементы на экране будут в два раза четче, чем реальный экран 375x667, потому что физических пикселей на физическом экране в два раза больше.
Некоторые другие примеры:
Самсунг гэлакси с4
айфон 5с
Почему существует Пиксельное соотношение устройств?
Причина, по которой было создано соотношение пикселей в CSS, заключается в том, что, поскольку экраны телефонов получают более высокие разрешения, если бы у каждого устройства оставалось соотношение пикселей в CSS, равное 1, веб-страницы отображались бы слишком маленькими для просмотра.
Типичный полноэкранный настольный монитор составляет примерно 24 "при разрешении 1920x1080. Представьте, что этот монитор был уменьшен до 5", но имел то же разрешение. Просмотр вещей на экране был бы невозможен, потому что они были бы такими маленькими. Но производители выпускают экраны телефонов с разрешением 1920x1080 постоянно.
Таким образом, соотношение пикселей устройства было изобретено производителями телефонов, чтобы они могли продолжать увеличивать разрешение, резкость и качество экранов телефонов, не делая элементы на экране слишком маленькими, чтобы их можно было увидеть или прочитать.
Вот инструмент, который также сообщает вам плотность пикселей вашего текущего устройства:
http://bjango.com/articles/min-device-pixel-ratio/
источник
width: 100%
будет иметь полную ширину экрана. Это не будет растягиваться. Экран «думает», что это дисплей с разрешением 300 пикселей. Изображения отображаются в соответствии с логическим / CSS разрешением. Теперь, в вашем примере, вы также можете использовать изображение размером 600 пикселей. Это будет полная ширина логического дисплея в 300 пикселей, но, поскольку ваш дисплей имеет исходные 600 пикселей, изображение будет выглядеть в два раза чище, чем исходное изображение в 300 пикселей. Изображение большего размера, но выглядит лучше, поскольку на дисплее есть все лишние пиксели. Это идея «Retina Displays».https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
это почти самоочевидно. число описывает отношение того, сколько «реальных» пикселей (физических пикселей экрана) используется для отображения одного «виртуального» пикселя (размер установлен в CSS).
источник
Статья Бориса Смуса Изображения с высоким разрешением и переменной плотностью пикселей разрешением дает более точное определение соотношения пикселей устройства: количество пикселей устройства на пиксель CSS является хорошим приближением, но не всей историей.
Обратите внимание, что вы можете получить DPR, используемый устройством с
window.devicePixelRatio
.источник