2

これは私の最初の完全なレスポンシブサイトになるので、周りを見回して、投稿の下部にある基本的なメディアクエリを見つけました。これは、何らかの形でほとんどのデバイスと一致しているようです。

私はこれらのクエリ以外のコードから始めました（つまり、平均的なデスクトップをターゲットにしています）。次に、モバイル用の最初のメディアクエリに取り組みましたが、2番目のルールは私には意味がありません（つまり、321pxより大きいすべてのもの）。

次のルールである、321から768までのすべてを意味しているようです。これがどのように機能するのか誤解していると思いますか？誰かがおそらくこれを十分に簡単な方法で説明できますか？私はすべてのCSSコードがこれらのメディアクエリの内部にあるべきであり、最初にモバイルバージョンから始めて、解像度が大きくなるにつれて徐々に拡張するべきではないと考え始めています。

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (orientation: landscape)
{

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) and (orientation: landscape)
{

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px)
{

}
4

6 に答える 6

6

メディアクエリの目的は、特定のウィンドウ/画面サイズで見栄えがするように要素を変更することです。
モバイルファーストのデザインが人気を博し始めています。基本的に、開発者はモバイルデバイスで最適化（見た目と動作が最適）されるWebサイトを作成します。次に、cssの最後にメディアクエリを徐々に挿入して、元のcssを上書きします。彼は、ページがユーザーのウィンドウ/画面サイズに合わせて調整されるようにこれを行い、結果としてより良いエクスペリエンスをもたらします。

次に例を示します。

.ImageGalleryItems {
  float: none;
  clear: both;
  background-color: black;
}
@media only screen and (min-width: 768px) {
  float: left;
  background-color: white;
}

これで、ユーザーの画面サイズが768ピクセルを超えると、画像アイテムが隣り合って表示されるのではなく、左に浮きます。また、背景色が変わります。

これが使用できる原則です。最初にモバイル向けに開発する場合:hoverは、元のcssにエフェクトを追加しないでください。これらは、モバイルデバイスには採用されていません。次に、メディアクエリを使用して、デスクトップ用のこれらの効果を追加します。これにより、データ使用量が節約され、よりクリーンなコードが作成されます。

于 2013-03-21T14:50:14.690 に答える
2

あなたは少しやり過ぎていると思います。メディア クエリの数を減らし、何らかの方法で設計が「中断」するブレークポイントをいくつか追加します。

クエリに何を入れるかを検討する: 1 つの方法は、一般的な CSS の何らかの形式を記述してから、メディア クエリ内のいくつかのプロパティを上書きすることです。もう 1 つの方法は、一般的な CSS の「代替」プロパティを単純にスキップして、各クエリ内で設定することです。

したがって、すべての CSS をメディア クエリ内に記述するわけではありません。変えたいところだけ。

于 2013-03-21T14:37:48.530 に答える
1

すべてをメディア クエリに入れる必要はありません。メディア クエリは、そのクエリに該当するデバイスや画面サイズにのみ適用されます。

@media 1 が @media 2 に影響するとは限りません。

注: 時間を節約するために、メディア クエリをカンマ区切りのリストに入れることもできます。

これは私が自分のサイトでそれを行った方法です：

 /* styles for desktops */
 body{width:100%;}

 img{width:100%;} /* and so on */


@media handheld and (max-width: 960px),

screen and (max-width: 960px),

only screen and (min-device-width : 768px) and (max-device-width : 1024px),

only screen and (min-device-width : 320px) and (max-device-width : 480px),

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5)

{
     /*Styles for non desk-tops*/
     /*You Only Need to put styles you want to change in here*/
     img{width:90%;}
}

これが役立つことを願っています。

于 2013-03-21T15:37:24.527 に答える
0

それはかなりの数のメディアクエリです-私はあなたが本当にそれらすべてを必要とするかどうかについて考えます。

これらには、モバイルファーストまたはデスクトップファーストからアプローチできます。本当に違いはありません。

Bootstrapがデフォルトとして使用するメディアクエリを確認することをお勧めします。

http://twitter.github.com/bootstrap/scaffolding.html#response

于 2013-03-21T14:39:18.653 に答える