CSSメディアクエリーでレスポンシブ化。iOS端末(iPhone/iPad)等を画面サイズ別にスタイリングする

スマホやタブレットの普及で画面サイズによってスタイルの変更をするレスポンシブデザインが注目されていて、コンテンツによっては初めからスマホを重点においたUIを作って後からPCにも最適化するモバイルファーストなんてのもあったりで、IEに入れ替わってまた面倒なのが来たなと思ってる人も多いのではないでしょうか。
今後もまだ進化しそうな業界ですが、現時点でのCSSのメディアクエリーを使って画面サイズごとにレスポンシブさせる設定です。

Example

iOS端末の画面サイズ

端末/画面サイズ Width Height
iPhone 3G/3GS 320 480
iPad/iPad2 768 1024

htmlのhead内に追加

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

CSS

<style type="text/css">
#responsive{
height:2000px;
background-color: #696969;
}
#responsive p:before{
content:'1280px以上';
}
p{
margin: 0;
}
/* SmatPhones */
@media (max-width: 767px) {
#responsive{
background-color: #ff69b4;
}
#responsive p:before{
content:'767px以下';
}
}
/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
#responsive{
background-color: #191970;
}
#responsive p:before{
content:'768px以上〜991px以下';
}
}
/* Desktops */
@media (min-width: 992px) and (max-width: 1199px) {
#responsive{
background-color: #008000;
}
#responsive p:before{
content:'992px以上〜1199px以下';
}
}
/* LargeDesktops */
@media (min-width: 1200px) {
#responsive{
background-color: #fa8072;
}
#responsive p:before{
content:'1200px以上';
}
}
</style>

html

<div id="responsive">
<p></p>
</div>	
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

14 − 4 =