CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSメディアタイプとクエリを理解する

CSSメディアタイプとクエリは、ユーザーがデバイスの一般的なタイプ（画面、印刷など）またはその特性（画面解像度、ビューポートの寸法など）に従って特定のスタイルを定義するのに役立ちます。

構文

メディアクエリの構文は次のとおりです-

@media not | only mediatype and (expressions) {
   CSS-Code;
}
のみ

ここで、メディアクエリは-

の場合に適用されます
  • mediatypeは、ドキュメントがレンダリングされるデバイスタイプと一致します。
  • not / only演算子が定義されていない場合、メディアクエリはすべてのメディアタイプに適用されます。
  • not / only演算子が指定されている場合、メディアクエリは特定のメディアタイプにそれぞれ適用されない/のみ適用されます。

ユーザーは、それぞれが異なるメディアに対応する異なるスタイルシートを持つことができます。たとえば、ユーザーは印刷メディアとスクリーンメディアに異なるスタイルシートを持つことができます。

<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">

そして、

<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">

CSS3-

にリストされているメディアタイプは次のとおりです。
Sr.No 値と説明
1 すべて
スタイルシートはすべてのメディアタイプのデバイスに適用されます
2 印刷
スタイルシートはプリンターに適用されます
3 画面
スタイルシートは、コンピューターの画面、タブレット、スマートフォンなどに適用されます。
4 スピーチ
スタイルシートは、ページを大声で「読み取る」スクリーンリーダーに適用されます

メディアに依存するスタイルシートを作成する方法は次のとおりです-

  • @mediaAt-rulesの使用
  • @importAt-rulesの使用
  • メディア属性でHTMLの要素を使用する

例

CSSメディアクエリの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
}
.col {
   float: left;
   width: 20%;
   padding: 40px;
}
body {
   background-color: lemonchiffon;
   margin: 20px;
}
@media screen and (max-width: 850px) {
   .col {
      width: 50%;
   }
   body {
      background-color: mediumseagreen;
   }
}
@media screen and (max-width: 550px) {
   .col {
      width: 100%;
   }
   body {
      background-color: powderblue;
   }
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div></body></html>

出力

これにより、次の出力が生成されます-

画面サイズが850pxを超える場合-

CSSメディアタイプとクエリを理解する

画面サイズが550pxから850pxの間の場合-

CSSメディアタイプとクエリを理解する

画面サイズが550px未満の場合-

CSSメディアタイプとクエリを理解する

例

CSSメディアクエリの別の例を見てみましょう：HTMLドキュメント-

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>
CSS document (screen.css):
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}

CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }

出力

これにより、次の出力が生成されます-

ドキュメントが画面のメディアタイプに表示されている場合-

CSSメディアタイプとクエリを理解する

ドキュメントが印刷メディアタイプで表示される場合-

CSSメディアタイプとクエリを理解する


  1. CSSで一般的なデバイスブレークポイントにメディアクエリを使用するにはどうすればよいですか？

    CSSを使用して一般的なデバイスブレークポイントにメディアクエリを使用するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    body {       font-family: "Segoe UI", Tahoma,

  2. OLED スクリーンとその種類とは

    デジタルディスプレイ技術は大幅に改善され、進化しています。ディスプレイ メーカーは、経済的で耐久性があるだけでなく、最高の視聴体験を提供するスクリーンを製造しようとしています。周りを見渡すと、私たちが使用しているほとんどの電子機器の画面タイプは、LCD、LED、または CRT 画面であることがわかります。しかし、これらの基本的な問題は、膨大な電力を消費するか、表示品質が低いことです. これらの問題を克服するために、消費電力が少なく、輝度レベルが高い新しい種類のディスプレイ画面が製造されています。これらの表示画面は、OLED ディスプレイとして知られています。それでは、この表示について以下で詳し