メディアクエリで使用する適切な解像度値は何ですか？

Question

最近、私はウェブサイトをさまざまな画面サイズに適応させる素晴らしい方法であるため、CSS Media Queriesを使って遊んできました。私はそれらをライブバージョンに実装する予定です。

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

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、および1382ピクセル）。通常は私はちょうど4（480,600,768,1024）に固執します。

min-width: 480px：範囲を説明するために

は

min-width: 600pxをランドスケープモードでのモバイルデバイスをターゲットとアップ

ます：ターゲットポートレートモードでタブレットとアップ

min-width: 768px：ターゲットランドスケープモードでタブレットとアップ

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

そして、私は通常、私の携帯電話のポートレイトビューのCSSを最初から持っています（したがって、用語 "320 and up"）。

Answer 2

私はSuviの答えに追加したいと思います。

アダプティブデザインでは、対象の解像度にメディアクエリが適用されますが、レスポンシブデザインでは、必要と思われる場所にブレークポイントを自由に追加できます。

ページに何個のブレークポイントがあるべきかについてのルールはありませんが、レイアウトが破損するたびに追加する必要があります。目的は、ビューポートの幅に関係なく、デザインとコンテンツがうまく流れていることを確認することです。

私はこのポストは良い概要を提供思う：

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

Answer 3

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

*/ 

シンタックスの例に示すように、これらのより少ない変数をすべて組み合わせて、複雑なメディアクエリを取得できます。 ORの場合はAND演算子とカンマに "と"を使用します。さまざまな画面解像度、デバイスの向き（横/縦）、網膜または不可能のデバイスを組み合わせることができます。

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