HTML5移动Web开发（五）——移动设计之CSS媒介查询

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以上宽度的屏幕中启用。

　　效果图：

HTML5移动Web开发（五）——移动设计之CSS媒介查询

桌面优先的网站
除了创建纯粹的桌面网站或者纯粹的移动网站，我们还有其他建站方式，其中就是桌面优先，并且在移动设备上优雅降级。

移动优先网站

另一个方式是移动优先，并在桌面设备上优雅降级。这种方式可以使用以下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媒介查询

相关文章