標籤：
CSS媒介查詢(media query)是響應式設計中很重要的部分，它協助你實現更加靈活的移動設計。
看範例程式碼ch01r06_c.html
<!doctype html><html> <head> <title>Mobile Cookbook</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script src="modernizr-1.7.min.js"></script> <style> body { margin:0; padding:0; background:#FFFFA6; } #main section { display:block; border:5px solid #29D9C2; width:60%; height:120px; margin:5% auto; } @media screen and (min-width: 480px) { #main { width:90%; margin:0 auto; } #main > section:first-child { margin-right:5%; } #main section { float:left; width:45%; } } </style> </head> <body> <div id="container"> <div id="main"> <section id="top-news"></section> <section id="sports"></section> </div> </div> </body></html>
在窄屏中，這兩個section會縱向排列，而在寬屏中會橫向排列，這就是CSS媒介查詢的功能。在樣本中，@media screen and (min-width: 480px){...}的樣式會在480px以上寬度的螢幕中啟用。
：
案頭優先的網站
除了建立純粹的案頭網站或者純粹的移動網站，我們還有其他建站方式，其中就是案頭優先，並且在行動裝置上優雅降級。
移動優先網站
另一個方式是移動優先，並在電腦裝置上優雅降級。這種方式可以使用以下CSS:
@media only screen and(min-width: 320px){
/* Styles */
}
@media only screen and(min-width: 640px){
/* Styles */
}
@media only screen and(min-width: 800px){
/* Styles */
}
@media only screen and(min-width: 1024px){
/* Styles */
}
一站方式
另一個方式是只建立一個網站，併兼顧移動和電腦裝置，而不是只專註其中一個。
HTML5移動Web開發（五）——移動設計之CSS媒介查詢
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
