мой CSS не применяется в ширину экрана моего мобильного

Question

<meta name="viewport" content="width=device-width, initial-scale=1.0">

И я включил следующие стили:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px) and (max-device-width: 1500px)" href="style.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

Answer 1

я решаю свою проблему с trhis max-device-width относится к разрешению вашего устройства, а не к размеру ширины окна, то есть к min-width или max-width, смотрите здесь для лучшего понимания.

device-widthиспользуются, когда вы хотите настроить таргетинг на мобильные устройства, но не на окна с маленьким размером.до значения менее 481 пикселей, а затем замените:

(max-device-width: 480px) на:

(max-width: 480px) в правиле медиа-запроса mobile.css.

Answer 2

Если вы имеете в виду, что общие правила из первой включенной таблицы стилей не применяются: это связано с использованием min-device-width в первой строке.Удалите это, например:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1500px)" href="style.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

Таким образом будет загружена первая таблица стилей, после чего правила из второй таблицы стилей будут перезаписывать правила с идентичными селекторами из первой таблицы стилей, как вы, вероятно, и предполагали.

В вашей версии только вторая таблица стилей будет применяться к устройствам меньшего размера, без первого ...

Кроме того, подумайте, действительно ли вы хотите использовать max- device -width,точнее просто max-width.Медиа-запрос с max-device-width: 480px в большинстве случаев будет применяться только к устройствам, размер которых меньше, чем «пиксели CSS» размером 240px (которые больше не существуют) из-за двойной (или более) плотности пикселей большинства современных устройств.