1

CSSメディアクエリについて質問です。

私はdesktop.cssとipad.cssを使用してHTMLページを実装しており、それらを2つの別々のファイルに入れたい..desktop.cssでは、 @import url("ipad.css"); を使用します。また、実際のデスクトップ スタイルを持つスクリーンと (device-width:768px) ブロックだけでなく、@media も追加します。

したがって、desktop.css は次のようになります。

@import url("ipad.css");

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

iPad CSS は iPad に正しく適用されますが、何らかの理由でデスクトップ用の CSS が適用されません..「@media not only screen ...」の何が問題なのかわかりません。

http://www.w3.org/TR/css3-mediaqueriesを参照しました

「メディア クエリの先頭にキーワード 'not' が存在すると、結果が否定されます。つまり、メディア クエリが 'not' キーワードなしで true だった場合、それは false になり、その逆も同様です。」

しかし、何らかの理由で、デスクトップはスタイルをレンダリングしません...助けてください..ありがとう..

** * ****編集済み* *

このアプローチを使用する際の問題は何ですか?

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

4 に答える 4

1

次のリンクが役立つかもしれません。 メディアクエリはdeveloper.mozilla.orgに ありますメディアクエリはcss3.infoにあります

于 2011-10-04T06:08:08.050 に答える
0

only screenこれは、画面だけで、他には何もレンダリングされないことを意味します。これnotを否定して、すべてがscreenレンダリングされるようにします。

于 2011-04-23T09:02:14.207 に答える
0

次のいずれかの方法で行います。

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

ここで、desktop.css は @ メディア クエリ ルールなしで始まり、ipad.css はルールで始まります @media screen and (max-width: 768px) {/*your code here*/} 。

または、通常のように両方にリンクし、desktop.css の下に ipad.css を配置します。

<link rel="stylesheet" type="text/css" href="css/desktop.css"/>
<link rel="stylesheet" type="text/css" href="css/ipad.css"/>

@メディアルールなしでdesktop.cssファイルを開始し、ipad.cssはルールで開始し@media screen and (max-width: 768px) {/*your code here*/} ます。

この方法では、すべてのデスクトップ ブラウザーが desktop.css ファイルを読み取り、メディア クエリをサポートするブラウザーも ipad.css を読み取ります (画面解像度が 768px 未満の場合)。

編集で説明したようにそれらを使用すると、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 にメディア クエリを認識させ、サイズを変更してウィンドウ サイズの変更に対応させるには、私が言及したライブラリの助けが必要です。

于 2011-04-23T17:29:35.293 に答える
0

次のようなことを試しましたか

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

したがって、それがルールを画面以外のすべてに適用するものであるため、を失いnotます。つまり、あなたの場合はデスクトップです。

于 2011-04-23T09:05:41.213 に答える