Запрос СМИ во внешнем файле CSS

Question

Я изменяю свой сайт CSS3/HTML5 для работы с различными медианными запросами.

Страницы сайта находятся в каталоге Root. Файлы CSS находятся в папке в корневом каталоге css.

В голове теги моей страницы, у меня есть один CSS файл для материала по умолчанию, а затем у меня есть еще один для IPad во внешнем файле CSS под названием ipad.css

Когда я в Developer Tools в пределах Google Chrome, похоже, он не применяет правила в файле ipad.css. Я знаю это, потому что я хочу изменить размер текста элемента, и он не меняется. Ничего не происходит.

Это то, что я имею в тегах ШЕФ:

<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles"> 
 
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">

Согласно Инструменты разработчика Google Chrome, шириной IPad является 768px. Я ссылался на это в теге ссылки. Любые идеи или предложения приветствуются.

Answer 1

Используйте max-width: 768px, а не max-device-width: 768px.

Также не забудьте указать viewport meta tag в разделе заголовка вашего html.

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

Кроме того, вы можете проверить

What is the difference between max-device-width and max-width for mobile web?

Кроме того, имейте в моей вы не ориентации устройства, вы ориентируетесь разрешения.

Другим возможным источником вашей проблемы может быть то, что вы используете менее специфичные селектора в своем ipad.css. Не забывайте, что стили от вашего default.css также используются при разрешениях ниже 769 пикселей!

Чтобы проверить это, данное правило CSS на самом верху ipad.css:

* { display: none !important; } 

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

Answer 2

Я пробовал максимальную ширину, а стиль не применялся. Даже если я изменил цвет шрифта текста в классе div (тэг), ничего не происходит.

В качестве примера у меня есть класс div banner-textoverlay, поэтому в моем файле ipad.css я написал следующее, чтобы увидеть, изменит ли он цвет текста и ничего не произойдет вообще.

.banner-textoverlay p { 
    font-color:#000000; 
}