Intereting Posts
Стиль не применяется к большому пальцу, когда он является вертикальным jQuery .show () работает только в течение секунды Детский DIV заполняет оставшуюся высоту прокручиваемым контентом Разбор html-документа с использованием XML-парсера Выделите текст DIV как пользовательский тип символов в поле ввода Как избавиться от синей границы, которая окружает весь список опций 3 divs бок о бок – центральная фиксированная ширина и другие занимают остальную часть пространства экрана Точный таргетинг на директиву Filesmatch Получение значения ввода HTML в JavaFX WebView? Как resize логотипа navbar при прокрутке вниз jQuery mobile: разница между ролью данных и ролью / classом Замена формы HTML с сообщением об успешности после отправки, форма отправляет почту с использованием отдельного php-файла JQuery для изменения значения на основе выбора в выпадающем меню Рисование спирали на canvasе HTML с использованием JavaScript Обработка html-формы в Java-сервлете

Вопрос по запросу CSS Media

У меня вопрос о запросе на CSS-материал ..

Я реализую HTML-страницу с помощью desktop.css и ipad.css и хочу их в 2 отдельных файлах. В desktop.css я использую @import url («ipad.css»); а также добавьте @media не только экран и (блок ширины устройства: 768 пикселей), который имеет фактические стили рабочего стола.

Настолько desktop.css выглядит

@import url("ipad.css"); @media not only screen and (device-width:768px) { //Desktop styles } 

Теперь, когда iPad CSS правильно применяется на iPad, по какой-то причине CSS для рабочего стола не применяется. Не уверен, что не так с «@media не только экраном …»

Я сослался на http://www.w3.org/TR/css3-mediaqueries

и он говорит: «Наличие ключевого слова« нет »в начале медиа-запроса отрицает результат. То есть, если медиа-запрос был истинным без ключевого слова« не », он станет ложным и наоборот».

Но по какой-то причине рабочий стол никогда не создает стили … Пожалуйста, помогите .. Спасибо.

** * **** EDITED * *

Что может быть проблемой при использовании этого подхода?

 @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px); 

Вы пробовали что-то вроде

@media only screen and (device-width: 768px) { /* desktop styles here */ }

Итак, потеряйте not то, что делает правило применимым ко всему, кроме экрана, то есть рабочего стола в вашем случае.

Следующая ссылка может быть полезна. медиа-запросы на медиа-запросы developer.mozilla.org на css3.info

only screen означает, что только экран и ничего не делает это. Это not отрицает этого, так что все, кроме screen , сделает это.

Сделайте это так:

   

Где desktop.css запускается без каких-либо правил @ media query, а ipad.css начинается с @media screen and (max-width: 768px) {/*your code here*/} .

Или просто ссылку на оба, как обычно, с ipad.css ниже desktop.css.

   

Кроме того, вы запускаете файл desktop.css без каких-либо правил @ media, а ipad.css начинается с @media screen and (max-width: 768px) {/*your code here*/} .

Таким образом, все настольные браузеры будут читать файл desktop.css, а браузеры, поддерживающие мультимедийные запросы, также прочитают ipad.css (когда разрешение экрана ниже 768 пикселей).

Если вы используете их, как вы описываете в своем редактировании, IE8 и ниже будут бесполезны, это хорошо объясняется в этой статье => http://dev.opera.com/articles/view/safe-media-queries/

И если вы хотите, чтобы IE также изменил размер и понял ваши медиа-запросы, единственный способ решить проблему – использовать эту легкую библиотеку JavaScript => http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/, которая будет делать магию для вы (и в основном делаете возможным работать с IE, как с обычным браузером) 🙂

Проблема в том, что вы можете только IE игнорировать медиа-запросы, чтобы это не испортило ваши сайты. Чтобы IE понимал медиа-запросы и изменял размер и разбирался в изменениях в размере windows, вам нужна помощь из библиотеки, о которой я упоминаю.