Ситуация:
У меня есть 5 файлов CSS:
base.css с некоторыми стилями, которые применяются везде
339px.css для ширины до 339px
639px.css для ширины до 639px
999px.css и
bigscreen.css для чего-либо более 999px ширины
Код:
<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />
Все это хорошо, хорошо и отлично работает на любом устройстве, где 1 пиксель css равен 1/96 дюйма (2,54 см) на экране устройства. Однако в последнее время многие устройства отображения имеют плотность пикселей намного выше, поэтому они применяют, скажем, 639px.css, когда 339px.css будет подходящим. Это проблема, так как содержимое выглядит способом слишком маленьким.
Также обратите внимание, что я не могу использовать JavaScript и настольные компьютеры, поэтому всегда должен получить соответствующий файл css в соответствии с шириной, независимо от ориентации.
Чего я хочу достичь:
- 339px.css для любого устройства с:
- ширина <= 339px
- высокое разрешение, но небольшой экран (например, мой Android-смартфон с экраном 1280x720, но экран 5,7 дюйма) и в портретной ориентации.
Баскиально вместо пикселя css я бы хотел, чтобы устройство было относительно плотности пикселей устройства (на рабочем столе, планшете, смартфоне, дисплеях 4k, дисплеях Retina, вы поняли идею) и работает со всеми основными браузеров на мобильных и настольных платформах.
В то же время мне также нужна резервная копия пикселей css для старых браузеров.
Это дало мне серьезную головную боль, чтобы достичь этого. Насколько я понимаю, вы можете использовать device-pixel-ratio, но мне не удалось в какой-то момент сделать "css файлы" css файлов (область, где активны два css файла, например 339px.css и 639px.css).
Я нахожусь на своем пути. Я попробовал сочетание min-width, max-width, device-pixel-ratio, orientation: portrait/landscape медиа-запросов, но это не удалось из-за того, что десктопы должны игнорировать ориентацию. До сих пор я не мог получить положительный результат на всех устройствах, даже если я проигнорировал требование поддержки браузера.
