「レスポンシブWEBデザインテンプレート(スタイルシートで複数記述編)」の編集履歴(バックアップ)一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事
~
~
目次
#contents
~
~
----
~
*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
一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事
~
~
目次
#contents
~
~
----
~
*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