ウェブ学のすすめ

Study of Web Design & Programing

IE8以下でもCSS3 Media Queriesが使える「respond.js」を試す

CSS

IE8以下でもCSS3 Media Queriesが使えるようになるスクリプトとして主に「css3-mediaqueries-js」と「Respond.js」があります。今回はRespond.jsが動作するか試してみました。

Respond.js導入のポイント

  • cssファイルはエンベッドしない。
  • cssファイルはHTMLファイルと同一のサーバーに置く
  • ローカルでは動作しない
  • サーバーにアップするか、ローカルのサーバー環境(XAMPPなど)から確認する

プレビュー

↓サーバーにアップするとIE8以下でもMedia Queriesが動作されます。
http://webgaku.hotcom-web.com/respond_test.html

↓Adobe BrowserLabでチェック（IE6の場合）


※jsdo.itから出力されたHTMLではIE8以下にMedia Queriesが適用されませんでした(ChromeやFireFox、IE9では動作確認)。

コード

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Respond JS Test Page</title>
<link href="css/test.css" rel="stylesheet">
<script src="js/respond.src.js"></script>
</head>
<body>
<p>IE8以下でもCSS3 Media Queriesが使えるようになる「Respond.js」を試してみました。ダウンロードは→<a href="https://github.com/scottjehl/Respond" title="scottjehl/Respond ・ GitHub">scottjehl/Respond ・ GitHub</a></p>

<p>ブラウザの幅によってbodyのbackground-colorが変化します。もし黒色以外の色が見えていたのならあなたのブラウザでMedia Queriesが動作しています。ブラウザのサイズを色々変えて試してみてください。</p>

<p>media queriesの使い方の参考記事：<a href="http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/" title="CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き">CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き</a></p>
    
<p id="attribute-test">この部分はブラウザの幅が600px以上になると表示されるようになっています。</p>
</body>
</html>
CSS
@charset "utf-8";

body {
	background: black;
	color: #333;
	font-family:
        "ヒラギノ角ゴ Pro W3", 
        "Hiragino Kaku Gothic Pro", 
        "メイリオ", 
        Meiryo, 
        Osaka, 
        "ＭＳ Ｐゴシック", 
        "MS PGothic", 
        sans-serif；
}
p {
	width: 60%;
	min-width: 18.75em; /* 300px @ 16px */
	max-width: 43.75em; /* 700px @ 16px */
	margin: 2em auto;
	background: #fff;
	padding: 20px;
}

a {
	color: #333;
}

/* 300px以上の場合 */
@media only screen and (min-width: 300px){
	body {
		background: yellow;
	}
}

/* 480px以上、620px以下の場合 */
@media only screen and (min-width: 480px) and (max-width: 620px) {
	body {
		background: green;
	}
}

@media screen and (min-width: 620px),only print,projector{body{background:red;}}

/* 800px以上の場合 */
@media screen and (min-width: 800px){
	body {
		background: blue;
	}
}

/* 1100px以上の場合 */
@media screen and (min-width: 1100px){
	body {
		background: orange;
	}
}

/*one with pixels too! */
/* NOTE - if the user were to increase his browser font size to 20px (chrome: Large), 
			the above (1100px) media query will be incorrectly ignored!!!
			
			Assuming 20px browser setting, we would expect to see this progression:
			yellow > green > red > blue > NAVY > orange
			
			However, the orange never kicks in... which seems like a browser bug!
			Here's the math (assuming 20px browser setting):
			1200/20 = 60em     <     1100px
*/
@media screen and (min-width: 1200px){
	body {
		background: navy;
	}
}

/* 非表示 */
#attribute-test {
	display: none;
}

/* 表示 */
@media screen and (min-width: 600px){
#attribute-test {
	display: block;
	color: #fff;
	background: black;
	text-align: center;
}
}