//AdSenseにリンク

CSSビューポート(vw、vh、vmin、vmax)と、中心に配置

headに書くには

<meta name="viewport" content="width=device-width, initial-scale=1">

CSSにはViewportを基準とした単位。vh、vw、vmin、vmax。

Viewport Height(vh)

高さに基づく。1vhはviewportの高さの1%に相当する

Viewport Width(vw)

幅に基づく。1vwはviewportの幅の1%に相当する

Viewport Minimum(vmin)

高さと幅のうち小さいほうの寸法に基づく。viewportの高さが幅より小さい場合、1vminはviewportの高さの1%に相当。同様にviewportの幅が高さより小さい場合、1vminはviewportの幅の1%に相当する。

Viewport Maximum(vmax)

高さと幅のうち大きいほうの寸法に基づく。viewportの高さが幅より大きい場合、1vmaxはviewportの高さの1%に相当する。同様にviewportの幅が高さより大きい場合、1vmaxはviewportの幅の1%に相当する

画面の中心に配置する

div {
  height: 50vh;
  width: 50vw;
  float: left;
}

使用例1

viewportの幅が1000px、高さが900pxの場合、10vwは100px、10vhは90pxとなる。このviewportでは幅のほうが高さより大きいため10vmaxは100px、10vminは90pxとなる。

使用例2

  h2{
    max-width: 960px;
    margin: 50px auto 10px;
    font-size: 10vw;
  }
iframe {
    width: 50vw;
}

css