タグ

css3とブラウザに関するmaisenakajimaのブックマーク (1)

  • CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO

    例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く(このサンプルはChromeブラウザでの

    CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
    maisenakajima
    maisenakajima 2014/04/27
    vw(viewport width) viewportの幅に対する割合、vh(viewport heigh) viewportの高さに対する割合、vmin(viewport minimum)viewportの幅と高さのうち、値が小さい方に対する割合、vmax(viewport max)viewportの幅と高さのうち、値が大きい方に対する割合
  • 1