1

CSS @mediaクエリを発見したばかりですが、すばらしいと思います。ただし、すべてのブラウザがそれらをサポートしているわけではないことを私は知っています（つまり、IEの最新バージョンを除くすべて）。

次に、デフォルトのスタイルシートで何をすべきですか？通常サイズの画面をターゲットにする必要がありますか？最小公分母のルートに移動して、モバイルスタイルシートをロードする必要がありますか？それとも、デザインを完全に流動的にする必要がありますか？

@mediaクエリをサポートしないブラウザのデフォルトのスタイルシートを作成する場合、一般的に適切な計画は何ですか？

4

1 に答える 1

3

これは、「モバイルファースト」アプローチと「デスクトップファースト」のどちらを使用するかによって異なります。

デスクトップは、@ mediaをサポートしていないデスクトップブラウザで問題を引き起こさないはずです。なぜなら、デスクトップブラウザは、モバイルスタイルシートのルールを無視するだけだからです。唯一の問題は、メディアクエリをサポートしていないモバイルブラウザです。デスクトップに表示されるようにページをレンダリングします。ただし、win7以前の電話を除いて、ほとんどのスマートフォンはメディアクエリをサポートしています。問題は、それらの電話をサポートしたいかどうかです。スタイルシートは次のようになります。

body {
  width: 960px;
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  /* override desktop rules to accommodate small screens*/
  body{
    width: auto;
    margin: 0;
}

もう1つのアプローチは、モバイルファーストです。モバイル用の基本スタイルシートを作成し、メディアクエリを使用してデスクトップユーザーの考えを刺激します。デスクトップルールを別のファイルに入れ、メディアクエリと条件付きコメントを使用して、最新のデスクトップブラウザとIEにロードできます。しかし、ここでの問題は、IE mobileが条件付きコメントもサポートしているため、win7以前の電話はサポートされていないことです。HTMLは次のようになります。

<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->

デザインを流動的にすることは大いに役立ちます。目的は、画面サイズに関係なく、サイトが常に見栄えがすることです。ウィンドウのサイズを変更して試してみてください。画面を狭くする場合、流動的なデザインではサイドバーを下に移動できません。このためには、メディアクエリが必要です。

幸運を

于 2011-06-11T18:08:15.110 に答える