2014年02月23日

レスポンシブ ウェブデザインのCSSの書き方

レスポンシブなウェブサイトを作るときの基本。

まずHTMLのhead内に以下を記述
HTMLソース

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

1.1つのCSS内で分ける

cssには、@mediaを使用して、min-widthとmax-widthでそれぞれ対応したcssを分けて書く。
CSSソース

@media(min-width:769px){
ここにCSSソース
}
@media(max-width:768px) and (min-width: 321px){
ここにCSSソース
}
@media(max-width:320px){
ここにCSSソース
}

2.CSSを分ける

もしくはcssファイルを分けて作り、htmlのheadに以下のように記述する。
HTMLソース

<link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
<link rel="stylesheet" href="tablet.css"  media="(max-width:768px) and (min-width: 321px)">
<link rel="stylesheet" href="mobile.css"  media="(max-width:320px)">

画像に関して

画面のサイズに合わせて画像もレスポンシブに対応する場合は以下のように記述。
CSSソース

img {
	max-width: 100%;
	height: auto;
}