CSSビューポート(vw、vh、vmin、vmax)と、中心に配置
Contents
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;
}
ディスカッション
コメント一覧
まだ、コメントがありません