0

私はこの記事に出くわしました：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

さまざまな @media クエリを示しており、非常に便利だと思います。しかし、私は少し混乱しています。次のようなものが含まれます。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

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

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

これらの @media クエリのうち 3 つを使用するべきなのか、それともランドスケープとポートレートをカバーするものを 1 つだけ使用するべきなのか、わかりにくいと思います。誰かが私のために違いを説明できますか?

4

1 に答える 1

2

最初のクエリでは、縦向きと横向きの両方のスタイルを定義します。2 番目のメディア クエリでは、スマートフォンが横向きモードのときに適用するスタイルを設定するだけで、最後のクエリは縦向きモードのスマートフォンのスタイルを入力する場所です。http://lab.maltewassermann.com/viewport-resizer/のようなレスポンシブ デザインのサイズ変更ツールを使用することをお勧めします。

于 2013-01-20T05:53:41.143 に答える