※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。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