[CSS]長さの単位 #CSS

CSSで使う長さの単位

実際によく使う単位は em ,px の2種類でしょう。
デザイナーさんによってはptで指定がくることもありますが、ピクセルで割り切れず厳密に同じ長さにならないためpxで指定いただくようお願いしています。

またCSS3では更に下記単位が追加されることになっています。
このうち rem は非常に扱いやすい単位です（詳しくは後述）。

remはCSS3で追加される新しい単位です。
emに似ていますが、remは親要素ではなくルート要素のフォントサイズを元に計算されます。
root emでremです。

<ul>
    <li>果物
        <ul>
            <li>りんご</li>
            <li>みかん</li>
        </ul>
    </li>
    <li>野菜</li>
</ul>

li{
    font-size: 1.2rem;
}

よくあるリストの入れ子ですが、ここで単位にemを使うとりんごとみかんの文字デカ！となります（1.2x1.2=1.44）。
remなら面倒な計算は不要で、ルートのフォントサイズを把握しておけばOKです。

http://caniuse.com/#feat=rem
IEは11以上ですが、主要ブラウザはカバーしているので問題ないでしょう。
IE9/10でもショートハンドプロパティを使用せず、font-size: 1.2rem;等と指定すれば大丈夫です。

レスポンシブサイトの高さ指定で活躍します。
（詳しくは参考サイトへ）

<body>
    <div class="eyecatch">
        <img src="hoge.jpg" alt="hoge" />
    </div>
    <p>ほげほげほげほげ</p>
</body>

.eyecatch{
    width: 100%;
    overflow: hidden;
}
.eyecatch img{
    height: 100vh;
}

http://caniuse.com/#feat=viewport-units
vhに関してはIE9以上で対応しています。