Media Query

Posted by 管理者

メディアクエリーの書き方
[html]<a href="http://news.mynavi.jp/articles/2010/10/12/css3-media-query-template/index.html" target="_blank">参照</a>
<a href="http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries" target="_blank">元記事参照</a>
<a href="http://aqua-create.com/css/css3-media-queries-width-website/">ここ</a>も参考になります
[/html]
IE8以下は、アカンようで、
[html]
&lt;!–[if IE]&gt;
&lt;link href=&quot;pc.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;![endif]–&gt;
[/html]
これ要るようです。


[css]/* スマートフォン (縦向き、横向き両対応) ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
}
/* スマートフォン (横向き) ———– */
@media only screen and (min-width : 321px) {
}
/* スマートフォン (縦向き) ———– */
@media only screen and (max-width : 320px) {
}
/* iPads (縦向き、横向き両対応) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
}
/* iPads (横向き) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}
/* iPads (縦向き) ———– */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/* デスクトップとノートPC ———– */
@media only screen and (min-width : 1224px) {
}
/* 大きなディスプレイ ———– */
@media only screen and (min-width : 1824px) {
}
/* iPhone 4および解像度密度の高いデバイス ———– */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
}
[/css]

[html]
&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;smartphone.css&quot; media=&quot;only screen and (min-device-width : 320px) and (max-device-width : 480px)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;smartphone-landscape.css&quot; media=&quot;only screen and (min-width : 321px)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;smartphone-portrait.css&quot; media=&quot;only screen and (max-width : 320px)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;ipad.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;ipad-landscape.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;ipad-portrait.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;widescreen.css&quot; media=&quot;only screen and (min-width : 1824px)&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;iphone4.css&quot; media=&quot;only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)&quot;&gt;
&lt;/head&gt;&lt;/code&gt;
[/html]

携帯用も書いときます
[html]
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;携帯用CSS場所&quot; media=&quot;handheld, tty&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;PC用CSSファイル場所&quot; media=&quot;screen, projection &quot; /&gt;
[/html]

こんなこと書いた事もあった
[html]
&lt;head&gt;
.
.
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./mobile_home.css&quot; media=&quot;handheld, tty&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./pc_home.css&quot; media=&quot;screen, projection&quot; /&gt;
&lt;style type=&quot;text/css&quot; media=&quot;handheld, tty&quot;&gt;.for_pc{display:none;}&lt;/style&gt;
.
.
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;for_mobile&quot;&gt;うまく表示できないときは&lt;a href=&quot;携帯用UTL/mobile/&quot;&gt;こちら&lt;/a&gt;へアクセスしてください&lt;/div&gt;
&lt;div id=&quot;contens&quot; class=&quot;for_pc&quot;&gt;
.
.
（内容）
.
.
&lt;/div&gt;
[/html]