レスポンシブレイアウトの基本設定
2015-03-08
サイトをレスポンシブにする場合にまず最初に設定することのまとめ。
ブレークポイントを決める
レイアウトを切替る画面サイズを決めます。
PC・タブレット・スマートフォンそれぞれに対応したレイアウトにするなら
PC向け 768px以上
タブレット向け 768pxまで
スマートフォン 480pxまで
こんな感じでしょうか。
ちょっと使わないとすぐ忘れてしまうので、iphoneなどのデバイスの解像度を一覧にまとめておきます。
端末 | 画面サイズ(inch) | 画面解像度(px) | デバイスピクセル比 | ブラウザサイズ |
---|---|---|---|---|
iPhone4 | 3.5インチ | 640 x 960 | 2.0 | 320 x 480 |
iPhone5/5s | 4インチ | 640 x 1136 | 2.0 | 320 x 568 |
iPhone6 | 4.7インチ | 750 x 1334 | 2.0 | 375 x 667 |
iPhone6 plus | 5.5インチ | 1080 x 1920 | 2.0 | 414 x 738 |
iPad mini | 9.7インチ | 1536 x 2048 | 2.0 | 768 x 1024 |
iPad | 7.9インチ | 1536 x 2048 | 2.0 | 768 x 1024 |
View Portの設定
実際のHTMLファイルにviewportの設定をします。
<meta name="viewport" content="width=device-width,,initial-scale=1>
IE8以下の対応
IE8以下ではhtml5やメディアクエリーに対応していないため、javascriptを設定します。
html5shiv.jsを入れる
https://code.google.com/p/html5shiv/
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
css3-mediaqueries.jsを入れる
https://code.google.com/p/css3-mediaqueries-js/
<!--[if lt IE 9]> <script src="js/css3-mediaqueries.js"></script> <![endif]-->
CSSの設定
ブレイクポイントをしていたサイズに応じてmedea queryを設定します。
@media screen and (min-width:768px){ 768px以上(主にPC)のcssを書く } @media screen and (max-width:767px){ 768px未満(タブレット以下)のcssを書く }
もっと細かく設定するなら
@media screen and (min-width: 980px) { /* 980px以上 */ @media screen and (min-width: 768px) and (max-width: 979px) { /* 768px以上979px以下 */ } @media screen and (min-width: 480px) and (max-width: 767px) { /* 480px 以上 767px以下 */ } @media screen and (max-width: 479px) { /* 479px以下*/ }
メディアクエリーの記述方法には、
・モバイルファーストか
・PCファーストか
という考え方の違いで記述方法も変わってくると思います。
html,スマートフォンresponsive,viewport,ブレークポイント,レスポンシブレイアウト
Posted by ともろう
関連記事
レスポンシブデザインのテーブルレイアウト
レスポンシブデザイン時のテーブルレイアウトの一つの参考。 600px以下で表示し ...
HUAWEI スマホ(Android)の初期化
随分昔に購入したHUAWEI製のスマホ(EMOBILE)で画面ロック(パターンタ ...
ウェブサイトで游ゴシック Yu Goshicを使う時に注意すること
游ゴシック体は、Mac(OSX Marverics以降)、Windows(8.1 ...
Xperia,iPhoneほか 各機種のサイズ一覧
自分で確認する必要があり、エクスペリアをはじめiPhone,GalaxyやAQU ...
SSLセキュアなページでこのページには安全でない他のリソースが含まれています。と出た場合の対処法
SSLを設定して、ページをアップしたに、このようなメッセージが表示されることが ...