CSS - (5) Media Query

14775 ワード
htmlcss テキストリンク

Media Query


反応型Webの作成に必要な


HTML 5で


viewport meta

CS 3で


Media Query

viewport


学習position: fixed;で言及したことがある.
ブラウザの画面サイズを指します.
反応型画面のために入れなくてはいけません!
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

media query

@media screen and (minwidth: 768px) {
  /* Where all the magic happens... */
}
私のスクリーンが何px以上/以下にあるとき、私は「このスタイルを適用してください~」と言います.
以上のコードが768 px以上であれば,このような応用を意味する.

コードで確認！


index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox 2</title>
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

styles.css

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #212529;
}

まだ何もない空白の白い画面です.

vh ?

.box {
  width: 100%;
  height: 100vh;
  background-color: black;
}
vh : Viewport Height
1 vhは、ビューポートの垂直長の1%を意味します.

cssの変更


画面中央&仮想要素の挿入

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #ff4949;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
}

.box::after {
  content: 'Mobile';
}

@mediaの使用

@media screen and (min-width: 576px) {
  /* CSS 선언 */
  .box {
    background-color: #ff5216;
  }

  .box::after {
    content: 'Landscape Phone';
  }
}
widthが576 pxより大きい場合、カッコ内のCSSプロパティが有効になります.

@media screen and (min-width: 768px) {
  .box {
    background-color: #ffc82c;
  }

  .box::after {
    content: 'Tablet';
  }
}
@media screen and (min-width: 992px) {
  .box {
    background-color: #13ce66;
  }

  .box::after {
    content: 'Desktop';
  }
}

@media screen and (min-width: 1200px) {
  .box {
    background-color: #1fb6ff;
  }

  .box::after {
    content: 'Large Desktop';
  }
}

@media screen and (min-width: 1360px) {
  .box {
    background-color: #7e5bef;
  }

  .box::after {
    content: 'Super Large Desktop';
  }
}
【Openjudge】ハフマン符号化ツリー(STL)
📕 Unit Test