А для чего @retina-dpi:144dpi; @retina-dppx:1.5dppx; и как часто используется и для чего @media(min-resolution: ??

Question

[olya_097]

А для чего

@retina-dpi:144dpi;
@retina-dppx:1.5dppx;

и для чего @media(min-resolution: ?
и как часто используется?

Answer 1

[Сергей delphinpro]

про retina-dpi:144dpi слышу впервые. а вот мин-резолюшн это вполне нормальное правило. Используется для подгонки дизайна под разную плотность дисплеев

Comments

[olya_097]

А @retina-dppx:1.5dppx; ?

[Сергей delphinpro]

olya_097, нет такого в спецификациях. сами посмотрите

[Сергей delphinpro]

olya_097, Может быть у вас less файлы? Тогда это просто пользовательские переменные для удобной подстановки

@retina-dpi:144dpi; 
@retina-dppx:1.5dppx; 

@media(min-resolution: @retina-dppx) { }
// вместо конкретных цифр
@media(min-resolution: 1.5dppx) { }

[olya_097]

Сергей delphinpro, ну да, less
так суть вопроса не в этом
а что значит 144dpi и 144dpi? обычно ж пиксели пишут

[Сергей delphinpro]

olya_097, =) это уже немного другой вопрос. Что такое dpi?
Эта аббревиатура расшифровывается как dots per inch — кол-во точек на дюйм. Данный параметр определяет плотность пикселей на экране, сколько физических пикселей умещается в одном дюйме. Чем больше пикселей, тем менее они различимы глазом, тем более четкое изображение на таком дисплее.

dppx - это кол-во точек на пиксель. Можно запутаться, точки/пиксели =)) Речь идет и так называемых css пикселях, которые не всегда соответствуют физических пикселям (точкам).

Лектор из меня хреновый ), поэтому лучше погуглите развернутые статьи по теме css screen resolution, dpi, dppx.

[olya_097]

Сергей delphinpro, та нет, хороший))
спасибо!

Answer 2

[alex-1917]

Так ли :

spoiler

/*==========  Mobile First  ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){}

Эдак ли:

spoiler

@media only screen and (max-width:1199px){}
@media only screen and (max-width:991px){}
@media only screen and (max-width:767px){}
@media only screen and (max-width:479px){}

Все железобетонно работает и без указания плотностей, проверено и проверяется на:
1. айфоны 4s, 5s, 6s, 8, X
2. айпады 9'7 все, начиная с iPad 4 плюс ПРОшка 2017 12'9
3. какие-то самсунги с каждого года по одной не-топ модели в кол-ве 4шт
3. какие-то lg в кол-ве 6шт

Comments

[Сергей delphinpro]

По-моему, вы путаете красное с горячим. Какое отношение имеет размер экрана к его плотности пикселей?

Вот, допустим, я хочу чтобы моя картинка на ретине была четкой, но не хочу грузить для всех остальных картинку удвоенного размера. Что делать? Как мне помогут ваши правила? Правильно — никак. Мне нужно использовать min-resolution, чтобы для ретины подгрузить картинку в более высоком разрешении.

Пример утрирован, но, думаю, суть передаёт.

[alex-1917]

Сергей delphinpro, у вас что, реально по несколько наборов картинок для ретины и не для ретины???)) оооООо
ну подождите , мож кто подтянется из спецов, я так, мимо проходил...
каждый год по 80-120 сайтов сдаем, половина адаптивные, НИКТО чой-то не жаловался...
очередной поиск золотого зернышка в Аравийской пустыне....

и srcset полностью вычищаем, мусор это...

[Сергей delphinpro]

alex-1917, не всегда. чаще нет, чем да. Проще удвоенную картинку воткнуть. Да и вообще, стараемся вектор впихивать везде, где возможно.
Однако, ситуации бывают разные, иногда приходится и несколько разрешений одной картинки готовить. Как в css через медиа-запросы, так и в html через srcset (чем он, кстати, вам не угодил?).

Но в любом случае это отвлечение от темы вопроса автора.