Media Query 測試程式。
<!DOCTYPE html>
<html>
<head>
<meta charset="BIG5">
<title>RWD</title>
<style type="text/css">
body {
background-color: red;
}
@media screen and (max-width: 1200px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 960px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 720px) {
body {
background-color: green;
}
}
@media screen and (max-width: 600px) {
body {
background-color: blue;
}
}
@media screen and (max-width: 480px) {
body {
background-color: indigo;
}
}
@media screen and (max-width: 320px) {
body {
background-color: purple;
}
}
</style>
</head>
<body>
</body>
</html>
在 Chrome、FF 與 IE9 以上，改變瀏覽器大小可以顯示不同的背景顏色，但是在 IE8 以下就不行。加入 Respond.js、放入 jQuery（Respond.js 需要）、並將 css 抽出成 CSS 檔（順序有關係)，最後因為 IE 安全性的關係，在 Web Server 裡瀏覽，就可以了。
<!DOCTYPE html> <html> <head> <meta charset="BIG5"> <title>RWD</title> <link rel="stylesheet" href="a1.css" /> <script src="jquery-1.10.2.min.js"></script> <script src="respond.min.js"></script> </head> <body> </body> </html>---
---
---
沒有留言:
張貼留言