CSS Условный вопрос @Import

У меня есть файл HTML со следующим кодом:

<html>
 <head>
  <LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
 </head>

 <body>
  <span class="ipad_text">DESKTOP RED;  iPad GREEN</span>
<br />
  <span class="ipad_text2">DESKTOP BLACK;  iPad BLUE</span>
<br />
  <span class="ipad_only">iPad ONLY SHOW</span>
<br />
    <span class="ipad_only2">iPad ONLY 2</span>

 </body>
</html>

Также в папке css есть 2 файла CSS (desktop.css и ipad.css); В desktop.css у меня есть

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}

А в ipad.css у меня есть

@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

Теперь по некоторым причинам это не работает. Если я вырезаю/вставляю код из ipad.css в файл desktop.css следующим образом, страница правильно отображается как на рабочем столе, так и на iPad... Что я делаю неправильно? Я хочу, чтобы 2 CSS находились в отдельных файлах... Пожалуйста, помогите мне.

Следующие работы отлично

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}


@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

html ipad css media-queries
person copenndthagen    schedule 22.04.2011    source источник
comment
Когда вы импортируете таблицу стилей, это @import url("ipad.css");.   -  person BoltClock    schedule 22.04.2011
comment
Пожалуйста, предложите альтернативные способы, с помощью которых я могу применить 1) стили Diff для рабочего стола/ipad и 2) разместить их в 2 отдельных файлах CSS.   -  person copenndthagen    schedule 22.04.2011

Ответы (1)


arrow_upward
1
arrow_downward

Как я уже сказал в моем предыдущем ответе. ..

@import должны стоять перед любыми другими объявлениями стиля.

Но в вашем случае, если вы вначале импортируете стили iPad, они, вероятно, все будут переопределены стилями вашего рабочего стола.

... потому что ваши стили, отличные от iPad, применяются ко всем медиафайлам, включая Mobile Safari на iPad. Поскольку ваши стили, отличные от iPad, идут после условного @import, они переопределяют ваши стили независимо от того, импортируются они или нет. Это нормальное каскадное поведение.

person BoltClock    schedule 22.04.2011
comment
Хммм ... Так есть ли другой способ, с помощью которого я мог бы применить стили diff для рабочего стола / iPad, а также физически разместить их в двух отдельных файлах? - person copenndthagen; 22.04.2011
comment
Когда мы говорим @media не screen и (device-width: 768px) , я думаю, что это даже исключает рабочий стол..bcoz не screen..Правильно? - person copenndthagen; 22.04.2011
comment
@hmthr: Нет, это означает not (screen and (device-width: 768px)), читайте здесь w3.org/TR/css3-mediaqueries< /а> - person BoltClock; 22.04.2011
comment
На самом деле я пробовал это, и по какой-то причине стили под @media не экранные и (ширина устройства: 768 пикселей) не применяются для рабочего стола. - person copenndthagen; 22.04.2011
comment
@BoltClock: Предложенная вами мультимедийная штука не работает, и теперь я вижу, что вы ее удалили.. - person copenndthagen; 22.04.2011
comment
Ответ, предоставленный мне ранее, был неверным и не работал. Может кто-нибудь, пожалуйста, помогите мне. Спасибо. - person copenndthagen; 24.04.2011
comment
Я откатил его, когда вы прокомментировали, что это не сработало. Я не вижу какой-либо оставшейся части моего ответа, за которую все еще стоит понизить голос. - person BoltClock; 24.04.2011
comment
Так что, если вы проголосуете против вопроса, это нормально ... Но я не могу этого сделать !! - person copenndthagen; 24.04.2011