レスポンシブコーディングでよく使う、cssの%指定についてご紹介します。
普段使っている%指定も、どこの何に対する割合のことなのか、はっきりさせたいと思います！

(1) margin paddingの%は、「親要素の幅」に対する割合

まずは、.elmに対してmargin、paddingをつけます。

.elm {
margin: 8%;
padding: 8%;
}

すると、親要素の.boxの幅に対して8%の余白をつけてくれます。


これによって、デバイスの幅に合わせて余白を変動させられるわけですね。ウインドウの幅を変えてみると余白の大きさも変わっているのが分かるかと思います。
左右だけでなく、上下の余白もデバイスの幅に連動するとは意外ですよね。でもすごく便利！

(2) top left bottom right の%は、「親要素の幅 or 高さ」に対する割合

次は、.elmAbsと.elmRelに対して、topとleftをつけます。1つめは、絶対配置に、2つめは相対配置にして試してみます。

.box {
position: relative;
}
.elmAbs {
position: absolute;
top: 50%;
left: 50%;
}
.elmRel {
position: relative;
top: 100%;
left: 100%;
}

すると、topの値は、親要素の.boxの高さに対して50%、leftは、親要素の.boxの幅に対して50%の位置指定となります。


これで、親要素の大きさに合わせて位置を変動できます。positionがrelativeでも、absoluteでも親要素を基準にすることは同じですね！

(3) transformプロパティのtranslate値の%は、「その要素の幅 or 高さ」に対する割合

.elmに対して、transform: translateを指定します。
よくやる、positionの絶対配置との併用も書いてみます。

.elm {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

すると、その要素の幅と高さに対する割合で移動します。


大きさが変動する要素でも中央に表示させることができます！これが使えると、レスポンシブコーディングがぐっと正確に楽にできますね。

(4) width height の%は、「親要素の幅 or 高さ」に対する割合（条件あり）

最後に、.elmに対して、widthとheightを100%で指定します。
1つめは親要素に高さ指定あり、2つめは高さ指定なしです。

.box {
width: 80%;
height: 60px;
}
.elm {
width: 100%;
height: 100%;
}
/*.box2 {幅、高さ指定なし}*/
.elm2 {
width: 100%;
height: 100%;
}

この場合、親要素の幅と高さに対する割合で指定されます。
ただし、.elm2のように親要素に高さ指定がない場合、heightの%指定は効きません。

いかがでしたでしょうか。
改めて自分でもおさらいになったなとおもいます＾＾

これからは、デバイスサイズに合わせた単位Viewport Unit（ビューポートの単位）を使うことも増えてくるかと思います。でもAndroidは4.4から対応なんですよね・・。なのでまだまだ%指定を使いそうです。
Viewport Unitサポート状況　http://caniuse.com/#feat=viewport-units

関連：http://design-spice.com/2014/03/24/percentag/
こちらでも詳しく説明されていましたので参考にどうぞ。

お問い合わせ