CSS3 медиа-запрос не работает

Question

На моем веб-сайте используются следующие медиазапросы.

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1025px)" />
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

Я намеревался создать разные таблицы стилей для разных устройств. (На данный момент я хочу поддерживать только рабочие столы и iPad).

Но когда я загружаю веб-сайт на рабочий стол с помощью Firefox (версия 8) или Chrome (версия: 15.0.874.106), он загружает оба файла CSS (как web.css, так и ipad.css).

Я не слишком уверен, что не так с моим кодом. Может ли кто-нибудь помочь мне с этим.

Answer 1

для Desktop вы должны написать min-width вместо min-device-with, например:

<link rel="stylesheet" href="web.css" media="only screen and (min-width : 1025px)" />
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

Answer 2

Браузеры, поддерживающие использование медиа-запросов, будут загружать все ваши таблицы стилей, независимо от того, к какому из них, к сожалению, они должны отображаться.

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

media="screen and (min-width: 768px) and (max-width: 1024px)"
media="screen and (min-width: 1025px)"

Answer 3

ЭТО может не работать, но попробуйте изменить значения на число:

<link rel="stylesheet" href="web.css" media="only screen and (min-device-width : 1024px)" />
<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1023px)"