Вопрос по CSS Media Query - PullRequest
Новая
       22

Вопрос по CSS Media Query

1 голос
/ 23 апреля 2011

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

Я реализую HTML-страницу с помощью desktop.css и ipad.css и хочу, чтобы они были в 2 отдельных файлах. В desktop.css я использую @URL импорта ("ipad.css");а также добавьте @media not only screen и (device-width: 768px) блок, который имеет фактические стили рабочего стола ..

Так что desktop.css выглядит как 

@import url("ipad.css");

@media not only screen and (device-width:768px)
{
//Desktop styles
}

Теперь, пока iPadCSS корректно применяется на iPad, по некоторым причинам CSS для настольных компьютеров не применяется. Не уверен, что не так с «@media not only screen ...»

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

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

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

******* РЕДАКТИРОВАНИЕ **

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

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

Ответы [ 4 ]

1 голос
/ 04 октября 2011

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

0 голосов
/ 23 апреля 2011

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

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

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

0 голосов
/ 23 апреля 2011

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

  <style type="text/css">
   @import url("desktop.css"); 
   @import url ("ipad.css"); 
   </style>

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

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

<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
<link rel="stylesheet" type="text/css" href="css/ipad.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 понимал медиазапросы, а также изменял размер и адаптировался к изменениям размера окна, вам нужна помощь из библиотеки, о которой я упоминаю.

0 голосов
/ 23 апреля 2011

only screen означает, что просто экран и ничто другое не отображает это. not отрицает это, так что все, кроме screen, будет отображать его.

...