CSS-пиксели и оптические размеры с новыми разрешениями экрана (такими как Retina)
Я хочу, чтобы мои сайты выглядели такими же по размеру на сетчатке и других экранах с более высоким разрешением, как на стандартных экранах. Это значит, что они должны выглядеть одинаково, но с большей детализацией на экранах с более высоким разрешением.
Поэтому, если бы у нас был экран с четырехкратным числом пикселей на дюйм, я бы хотел, чтобы высота и ширина элементов были в два раза больше, чем обычные измерения пикселей CSS, а также удваивали размер шрифта.
Я посмотрел на это, и кажется, что решение обнаруживает DPI, а затем загружает другой CSS.
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
Дело в том, что все эти экраны имеют разные DPI.
iPhone 4/4S and iPod Touch (4th generation) -- 326
iPad (3rd)/4th generation) -- 264
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227
Так что, если бы у нас был элемент с высотой, скажем, 24px. Я хотел бы отрегулировать его высоту, чтобы точно соответствовать любому соотношению пикселей. IE. сделать математику и сделать это для всех элементов.
2 ответа
Вы оставляете размеры изображения нетронутыми, вы просто даете ему соответствующий источник.
Вы также можете разместить различные запросы, см. Здесь: http://css-tricks.com/snippets/css/retina-display-media-query/
Я бы порекомендовал вам прочитать о обоих dpi а также dppx, Когда вы смотрите на дисплеи Retina, вам нужно думать как о CSS-пикселях, так и о физических пикселях, как я уверен, вы знаете.
Если вы хотите, чтобы компоненты сайта были одинакового размера, я думаю, dpi это путь, но и добавить разные CSS для разных dpi уровни, которые вы хотите охватить, если вы хотите различать Retina и нормальное отображение, вам нужно различать dpi а также dppx (точек на дюйм-physcial)
Эти статьи помогли мне: