css - メディアクエリで使用するのに適した解像度の値は何ですか？

Question

最近、CSSメディアクエリをいじってみました。これは、Webサイトをさまざまな画面サイズに適応させるための優れた方法だからです。それらをライブバージョンに実装することを計画しています。

私の質問は、レイアウトが変更される推奨解像度値はありますか？

Answer 1

テンプレート「320以上」については、この記事を参照してください-Andy Clarkeによる、多くの開発者やデザイナーによって使用されています：http: //www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

メディアクエリセクションまで下にスクロールすると、5つのCSS3メディアクエリ増分（480、600、768、992、および1382px）が使用されていることがわかります。通常、私は4つ（480、600、768、1024）に固執します。

範囲を説明するには：

min-width: 480px：ランドスケープモード以上のモバイルデバイスをターゲットにします

min-width: 600px：ポートレートモード以上のタブレットをターゲットにします

min-width: 768px：ランドスケープモード以上のタブレットをターゲットにします

min-width: 1024px：デスクトップビューをターゲットにします

そして通常、私は最初にモバイルポートレートビューCSSを使用します（したがって、「320以上」という用語が使用されます）。

Answer 2

Suviの答えに付け加えたいと思います。

アダプティブデザインはメディアクエリをターゲットの解像度に適用しますが、レスポンシブデザインを使用すると、必要に応じてブレークポイントを自由に追加できます。

ページに必要なブレークポイントの数に関する規則はありませんが、レイアウトが中断する場所に1つ追加する必要があります。目的は、ビューポートの幅に関係なく、デザインとコンテンツが適切に流れるようにすることです。

この投稿は良い概要を提供すると思います：

http://www.williamwalker.me/blog/an-introduction-to-sensitive-design.html

Answer 3

Retinaディスプレイでこれを試してみてください

/* 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 */
}

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

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

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

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

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

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

あなたが元気だといいなと思っています

Answer 4

私はこの少ない解決策を書きました：

/* screens range */

@screen-s-max:    20em;         /* 320px  */
@screen-min:      20.063em;     /* 321px  */
@screen-max:      40em;         /* 640px  */
@screen-m-min:    40.063em;     /* 641px  */
@screen-m-max:    64em;         /* 1024px  */
@screen-l-min:    64.063em;     /* 1025px  */
@screen-l-max:    90em;         /* 1440px  */
@screen-xl-min:   90.063em;     /* 1441px  */
@screen-xl-max:   120em;        /* 1920px  */
@screen-xxl-min:  120.063em;    /*  1921px  */

/*
 0----- smallmobile -----320-----  mobile  -----640-----  tablet  -----1024-----  notebook  -----1440----- desktop -----1920----- wide
*/

@onlyScreen: ~"only screen";

@smallmobile: ~"(max-width: @{screen-s-max})";
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})";
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})";
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})";
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})";
@wide: ~"(min-width: @{screen-xxl-min})";

@portrait: ~"(orientation:portrait)";
@landscape: ~"(orientation:landscape)";

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";


@mobile-and-more: ~"(min-width: @{screen-min})";
@tablet-and-more: ~"(min-width: @{screen-m-min})";
@notebook-and-more: ~"(min-width: @{screen-l-min})";
@desktop-and-more: ~"(min-width: @{screen-xl-min})"; 

/*

syntax example

@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{
  body{
    opacity: 0.8;
  }
}

*/

構文例に示されているように、これらすべての少ない変数を組み合わせて、複雑なメディアクエリを取得できます。AND論理演算子には「and」を使用し、ORにはコンマを使用します。さまざまな画面解像度、デバイスの向き（風景/ポートレート）、網膜またはデバイスを組み合わせることができます。

このコードは簡単に構成できるため、画面範囲の値を編集/追加/削除して、さまざまな画面解像度を管理できます。