レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

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

コンテンツの横幅をデバイスの横幅に設定し、ページを開いた瞬間は倍率1倍にします。
ピンチイン・アウトも出来ますし、比率も見やすいため、
ユーザーが使いやすく、この指定を使っているサイトが多いです。
content の中は、カンマ（,）で区切ります。

1	`<meta name="viewport" content="width=1020px" />`

コンテンツの横幅を1020pxに設定します。
widthをpx設定すると、どのデバイスでも横幅をその値に設定します。

２．メディアクエリー

メディアクエリーは、CSS2からあるメディアタイプ（Media Type）という技術を拡張したものです。
メディアクエリーを使用すると、ウインドウサイズやデバイス解像度などの様々な条件に合わせたcssの変更が可能です。

指定の仕方

@media screen and (min–width:○○px){}（○○px以上）

@media screen and (max–width:○○px){}（○○px以下）

@media screen and (device–aspect–ratio: 16/9), screen and (device–aspect–ratio: 16/10) { ... }(アスペクト比)

@media all and (orientation: portrait) { ... }（縦向き）

など。

現在使用されているデバイスのサイズは、

スマホ縦	320px〜479px
スマホ横、タブレット	480px〜767px
タブレット	768px〜1023px
PC	1024px〜

がポピュラーです。

（一例）

iPhone4s	640px × 960px
iPhone 5s	640px × 1136px
iPad Air	1536px × 2048px
Galaxy S4	1080px × 1920px
Nexus 7	1200px × 1920px

この値を見ると上のデバイスサイズと違うように見えますが、
実際にはピクセル密度の関係でサイズが変わります。

ピクセル密度はDPI(dot per inch)やPPI(pixel per inch)と呼ばれていて、
この値が高いほど、面積当たりの解像度が高くなります。

具体的な例を出すと、
iPhone 3 と iPhone 4　同じ3.5インチのデバイスですが、
解像度がそれぞれ下記のようになっています。
・iPhone 3Gs 320px×480px
・iPhone 4s 640px×960px

iPhone 4sはiPhone 3Gsに比べて、縦横それぞれ2倍の差がありますが、同じ3.5インチの画面です。
このように、最近のデバイスは1pxの概念が少し異なってきています。

一昔前のandroidは、1.5pxで1px、
iPhoneは2pxで1px、
最近のandroidは3pxで1px
とサイズもバラバラですが、最終的な見え方は大体320pxに自動調整されます。

ゆえに現在メディアクエリーの設定に使用されているデバイスのサイズは、
上記サイズに設定するのがポピュラーなようです。

（ブラウザ解像度の一例）

iPhone 3GS	320px x 480px
iPhone 4s	320px x 480px
iPad Air	768px x 1024px
Gaalxy S2	320px x 533px
Galaxy S4 Xperia Z	360px × 568px
Nexus7	600px × 960px

参考サイト（http://www.smartphone-guide.net/comparison/）

レスポンシブwebデザインの指定方法の一例

[HTML]

1	<meta name=“viewport” content=“width=device-width,initial-scale=1.0” />

[CSS]

@media screen and (min-width:480px){}
@media screen and (min-width:768px){}
@media screen and (min-width:1024px){}

＜解説＞
まずスマホ用のcssを書き込んでいきます。
viewportでdevice-widthを指定してあるので、横幅はデバイスサイズに設定されています。

スマホ用にcssを全て書き終えた後、下記記述で各デバイスごとの指定をします。

@media screen and (min-width:480px){}の中に480px以降(スマホ縦〜PC)
@media screen and (min-width:768px){}の中に768px以降(タブレット〜PC)
@media screen and (min-width:1024px){}の中に1024px以降(PC)

viewport とメディアクエリーを使えば、なんとなくレスポンシブが出来るような気がしてきたと思います。
このほかにもレスポンシブWebデザインには様々な技術がありますが、
今回は導入編なので、それはまた次回！

レスポンシブコーディングを発注の際は、Bark to Imagineまで。