nicepaper @ ウィキ
nicepaper @ ウィキ

一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事

目次




HTML 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>レスポンシブWEBデザインテンプレート</title>
</head>
<body>
</body>
</html>

CSS

スマホ（縦横共通）,iPad（縦横共通）,iPhone（高密度デバイス）,普通PC,高解像度PC

こちらの方は共通の部分もあるため、コードは少くなります。 

@charset "utf-8";

/* iphone6などの解像度密度の高いデバイス ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
	body{
		background: #F00;
	}
}
/* スマートフォン (縦横向き両対応) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	body{
		background: #0F0;
	}
}
/* iPad (縦横向き両対応) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	body{
		background: #00F;
	}
}

/* デスクトップやノートPC ----------- */
@media only screen and (min-width : 1224px) {
	body{
		background: #FF0;
	}
}
/* 高解像度ディスプレイ ----------- */
@media only screen and (min-width : 1824px) {
	body{
		background: #F0F;
	}
}

スマホ（縦横別）,,iPad（縦横別）,iPhone（高密度デバイス）普通PC,高解像度PC

こちらの方は別々に記述するためコードが多くなります。 

@charset "utf-8";

/* iphone6などの解像度密度の高いデバイス ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
	body{
		background: #F00;
	}
}

/* スマートフォン (縦向き) ----------- */
@media only screen and (max-width : 320px) {
	body{
		background: #0F0;
	}

}
/* スマートフォン (横向き) ----------- */
@media only screen and (min-width : 321px) {
	body{
		background: #00F;
	}
}
/* iPad (縦向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	body{
		background: #FF0;
	}
}
/* iPad (横向き) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	body{
		background: #F0F;
	}
}
/* デスクトップやノートPC ----------- */
@media only screen and (min-width : 1224px) {
	body{
		background: #0FF;
	}
}
/* 高解像度ディスプレイ ----------- */
@media only screen and (min-width : 1824px) {
	body{
		background: #DDD;
	}
}

まとめ

お好きな方をどうぞ。色々なデバイスで確認してみてください。 参考記事：http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

「レスポンシブWEBデザインテンプレート（スタイルシートで複数記述編）」をウィキ内検索
最終更新：2015年10月09日 22:26