4(media query)

3792 ワード
CSS media query テキストリンク

media query


media queryページの内容をディスプレイ、スマートフォン、タブレットなどの画面で調整することができます.

@media


min-widthとmax-widthを使用して画面幅を設定します.
ex) min-width: 800px;, max-width: 800px;

コード#コード#

  <style>
    div {
      border: 5px solid green;
      font-size: 60px;
    }    
    @media(max-width: 800px) {
      div {
        display: none;
      }
    }
  </style>
<body>
  <div>
    Responsive
  </div>

結果



画面幅が800 px未満の場合、display:noneは何も表示されません.

画面幅が800 pxより大きい場合、div tagの値が画面に表示されます.

メディアqueryの使用


画面幅が800 px未満(max-width:800 px)の場合、残りのコードを気にすることなく簡単に画面を変更できます.

コード#コード#

@media(max-width:800px) {
  #grid {
    display: block;        
  } 
  ol {
    border-right: none;
  }  
  h1 {
    border-bottom: none;
  }
}

結果



画面幅が800 pxより大きい

画面幅が800 px未満

link tag

<link rel="stylesheet" href="style.css">cssファイルを作成してhtmlファイルに関連付けると、複数のhtmlページを同時に変更して使用できます.

意味は？


関係の略は、現在のドキュメントとリンクが必要なリソースを接続するプロパティです.
注意:https://opentutorials.org/course/3086/18323
https://www.techopedia.com/definition/30449/media-query-responsive-web-design
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
junitテストの並列テスト
3(grid)