0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: javascript, dpi, @media-query, less, css-препроцессор, retina, разрешение изображений, размытые пиксели</p>
1
<p>Теги: javascript, dpi, @media-query, less, css-препроцессор, retina, разрешение изображений, размытые пиксели</p>
2
<p>Retina - это зарегистрированный компанией Apple товарный знак. Под эти знаком выпускаются дисплеи (включая дисплеи мобильных устройств) с очень высоким разрешением экрана и маленьким размером пикселей. Сейчас это название "приклеилось" просто ко всем таким дисплеям.</p>
2
<p>Retina - это зарегистрированный компанией Apple товарный знак. Под эти знаком выпускаются дисплеи (включая дисплеи мобильных устройств) с очень высоким разрешением экрана и маленьким размером пикселей. Сейчас это название "приклеилось" просто ко всем таким дисплеям.</p>
3
<p>Подобное высокое разрешение создало ряд проблем, включая веб-разработку: 100 физических пикселей на обычном экране и на Retina будут иметь абсолютно разный размер. Чтобы сайты не превратились в крошечные квадратики, а расцвели красками на Retina, было принято простое решение: теперь пиксели делятся на логические и физические.</p>
3
<p>Подобное высокое разрешение создало ряд проблем, включая веб-разработку: 100 физических пикселей на обычном экране и на Retina будут иметь абсолютно разный размер. Чтобы сайты не превратились в крошечные квадратики, а расцвели красками на Retina, было принято простое решение: теперь пиксели делятся на логические и физические.</p>
4
<p>Логические пиксели, это как раз те пиксели, которые фигурируют в разметке, и они не обязаны совпадать с физическими, которые их будут отображать. На классических Retina-дисплеях каждому логическому пикселю соответствует квадрат 2x2 физических пикселей.</p>
4
<p>Логические пиксели, это как раз те пиксели, которые фигурируют в разметке, и они не обязаны совпадать с физическими, которые их будут отображать. На классических Retina-дисплеях каждому логическому пикселю соответствует квадрат 2x2 физических пикселей.</p>
5
<p>Таким образом, данный блок:</p>
5
<p>Таким образом, данный блок:</p>
6
.some-block { width: 100px; height: 100px; }<p>на обычных дисплеях будет иметь размер 100x100 физических пикселей, а на экранах Retina - 200x200 пикселей.</p>
6
.some-block { width: 100px; height: 100px; }<p>на обычных дисплеях будет иметь размер 100x100 физических пикселей, а на экранах Retina - 200x200 пикселей.</p>
7
<h2>А вот теперь начинаются проблемы</h2>
7
<h2>А вот теперь начинаются проблемы</h2>
8
<p>Особенно, если это не просто блок, а картинка, и причём растровая:</p>
8
<p>Особенно, если это не просто блок, а картинка, и причём растровая:</p>
9
.some-image { background: url(http://via.placeholder.com/100x100) 100px 100px; width: 100px; height: 100px; }<p>Данная картинка будет иметь размер 100x100 физических пикселей на обычных дисплеях, и целых 200x200 физических пикселей при разрешении всего 100x100. Такие изображения будут "размытыми". Предположим, что мы поставили разрешение 200x200:</p>
9
.some-image { background: url(http://via.placeholder.com/100x100) 100px 100px; width: 100px; height: 100px; }<p>Данная картинка будет иметь размер 100x100 физических пикселей на обычных дисплеях, и целых 200x200 физических пикселей при разрешении всего 100x100. Такие изображения будут "размытыми". Предположим, что мы поставили разрешение 200x200:</p>
10
.some-image { background: url(http://via.placeholder.com/200x200) 100px 100px; width: 100px; height: 100px; }<p>Да, теперь на Retina-экранах картинка выглядит превосходно, но при открытии на обычных устройствах мы будем загружать ненужные данные. И что же делать?</p>
10
.some-image { background: url(http://via.placeholder.com/200x200) 100px 100px; width: 100px; height: 100px; }<p>Да, теперь на Retina-экранах картинка выглядит превосходно, но при открытии на обычных устройствах мы будем загружать ненужные данные. И что же делать?</p>
11
<h2>Выход есть - @media-запросы!</h2>
11
<h2>Выход есть - @media-запросы!</h2>
12
.some-image { background: url(http://via.placeholder.com/100x100) 100px 100px; width: 100px; height: 100px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .some-image { background: url(http://via.placeholder.com/200x200) 100px 100px; } }<p>Оставим читателям вопрос, почему здесь фигурируют<strong>dpi</strong>. Но это запрос работает для Retina-устройств. И данный сайт прекрасно будет смотреться и достаточно быстро загружаться.</p>
12
.some-image { background: url(http://via.placeholder.com/100x100) 100px 100px; width: 100px; height: 100px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .some-image { background: url(http://via.placeholder.com/200x200) 100px 100px; } }<p>Оставим читателям вопрос, почему здесь фигурируют<strong>dpi</strong>. Но это запрос работает для Retina-устройств. И данный сайт прекрасно будет смотреться и достаточно быстро загружаться.</p>
13
<h2>Что ещё?</h2>
13
<h2>Что ещё?</h2>
14
<p>Существуют также устройства с промежуточным количеством пикселей на один логический. Более того, этому помогают опции масштабирования как в самом браузере, так и операционной системе. Поэтому правильный работающий<strong>@media-query</strong>выглядит немного иначе:</p>
14
<p>Существуют также устройства с промежуточным количеством пикселей на один логический. Более того, этому помогают опции масштабирования как в самом браузере, так и операционной системе. Поэтому правильный работающий<strong>@media-query</strong>выглядит немного иначе:</p>
15
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {<p>или даже так</p>
15
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {<p>или даже так</p>
16
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {<h2>Заключение</h2>
16
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {<h2>Заключение</h2>
17
<p>Собственно, всех этих штук вполне достаточно для красивого отображения сайта на подобных устройствах. Ну и с использованием CSS-препроцессоров этот<strong>@media-query</strong>можно вынести в константу и код выглядит уже не таким страшным.</p>
17
<p>Собственно, всех этих штук вполне достаточно для красивого отображения сайта на подобных устройствах. Ну и с использованием CSS-препроцессоров этот<strong>@media-query</strong>можно вынести в константу и код выглядит уже не таким страшным.</p>
18
<p>Например, с<strong>less</strong>всё будет выглядеть таким образом:</p>
18
<p>Например, с<strong>less</strong>всё будет выглядеть таким образом:</p>
19
@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)"; .some-image { background: url(http://via.placeholder.com/100x100) 100px 100px; width: 100px; height: 100px; @media @retina { background: url(http://via.placeholder.com/200x200) 100px 100px; } }<p><em>Есть вопрос? Напишите в комментариях!</em></p>
19
@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)"; .some-image { background: url(http://via.placeholder.com/100x100) 100px 100px; width: 100px; height: 100px; @media @retina { background: url(http://via.placeholder.com/200x200) 100px 100px; } }<p><em>Есть вопрос? Напишите в комментариях!</em></p>
20
20