web-dev-qa-db-ja.com

すべてのデバイスに対して単一のメディアクエリセットがありますか？

解像度の種類ごとに異なるメディアクエリを使用していますが、これを行うより良い方法はありますか？

cssresponsive-webdesignwebsite-designdesignmedia-queries
1
Shyamala

portrait and landscape を使用して、解像度が幅より長いか高さより高いかを検出できますが、一般的には、メディアクエリのセットを使用して最も一般的なタイプのデバイスを分類するのが最善です。理想的には、ウェブサイトはピクセルベースの要素ではなくパーセンテージを使用して幅と高さを使用する必要があります。これにより、ほとんどすべてのサイズにウェブサイトを適応させることができます。ほとんどの レスポンシブフレームワーク はこの方法を使用します。

pxではなく%を使用するとコンテンツが適応するため、変更されないのはテキストのサイズですが、4つのメディアクエリのセットを使用すると、これらの要素やその他の要素を簡単に調整できます。

一般的なメディアクエリのサイズは次のとおりです。

  • モバイルmax-width:640px
  • タブレットmax-width:1024px
  • デスクトップmax-width:1920px
  • 2K 4K max-width:1921px

上記の解像度は次のようになります。

    /* Small screen max-width 640px */
    @media only screen and (max-width:40em){}
    /* Medium screen min-width 641px */ 
    @media only screen and (min-width:40.063em){}
    /* Medium screen min-width 641px and max-width 1024px */
    @media only screen and (min-width:40.063em) and (max-width:64em){}     
    /* Large screen min-width 1025px */ 
    @media only screen and (min-width: 64.063em){} 
     /* Large screen min-width 1025px and max-width 1440px */    
    @media only screen and (min-width: 64.063em) and (max-width: 90em){}
    /* Extra large screens  min-width 1441px */
    @media only screen and (min-width: 90.063em){}
     /* Extra large screens  min-width 1441px and max-width 1920px */   
    @media only screen and (min-width: 90.063em) and (max-width: 120em){}
    /* Extra Extra large screens min-width 1921px */  
    @media only screen and (min-width: 120.063em){}

すべてのデバイスでページをまったく同じように表示しないでください。レスポンシブデザインでは、デバイスごとにページが若干異なるように見えることがよくあります。これは、デバイスの幅または高さによるものです。

目指すべきものは、見栄えが良く、解像度で機能するサイトです。サイトを設計するとき、ブラウザウィンドウのサイズを変更して、ページがさまざまなデバイスでどのようにレンダリングされるかを確認できます。読みやすく、見栄えが良く、モバイルで動作しないものはそれを変更するか、display:none 、ページの読み込みを高速化し、ユーザーエクスペリエンスを向上させるためにモバイルの機能を無効にするのが一般的です。すべてのデバイスでまったく同じ外観を作成しようとすることは不可能であり、時間の無駄です。

文学的な数百のトピックがあるので、Stack Overflowに進むことをお勧めします メディアクエリに関して Pro Webmastersの詳細なCSS関連の質問はSOに適しています。

1
Simon Hayter