メディアクエリの重要性と使用方法（画面サイズごとに異なるスタイルを表示する）

メディアクエリでは、さまざまな画面サイズでさまざまなスタイルを表示できます。
これは、CSS3の新機能です。
構文
ps：記述スタイル

@media mediatype and|not|only (media feature){
           /*css代码*/
}

詳細なパラメータ：

• mediatypeはメディアタイプで、次のいずれかとして記述できます。

  • すべてはすべてのデバイスを意味します
  • 印刷とは、プリンターと印刷プレビューを意味します
  • 画面コンピュータ画面、タブレット、携帯電話、最も一般的に使用されます

• および|ない|意味するだけ：および|非|特定の

• （メディア機能）：大括弧で囲む必要があります。つまり、メディア機能

  • 幅可視幅
  • min-width最小表示幅
  • max-width最大表示幅

例

@media screen and (min-width:320px){
     html{
       font-size:50px
     }
}

外部からリソースを導入する方法：
ps：ヘッドに記述され、スタイルの外部にあり、パラメーターは上記と同様であり、指定されていません

<link rel="stylesheet"  href="xxx.css" media="screen and (min-width:320px)">

remはHTMLのフォントサイズに従って変更され、フォントサイズはメディアクエリを通じて変更されて全体のサイズを変更するため、これをremと一緒に使用して全体的な変更を行うことをお勧めします。