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

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

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

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

2.メディアクエリー

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

指定の仕方

など。

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

スマホ縦 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]

[CSS]

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

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


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

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

About

You may also like...

Your email will not be published. Name and Email fields are required