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媒介查询的更多相关文章

  1. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  2. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  3. HTML5移动Web开发（八）——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  4. HTML5移动Web开发（四）——移动设计

    桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...

  5. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  6. HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器

    当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...

  7. WEB入门.五 页面设计简介

    学习内容 Ø        XHTML 的发展历程 Ø        XHTML 和 HTML 的区别 Ø        XHTML的DOCTYPE和基本标签 Ø        CSS 常用属性 能力 ...

  8. HTML5移动Web开发

    1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...

  9. HTML5移动Web开发（九）——优化浏览器视口宽度设置

    每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...

随机推荐

  1. NGUI 3.0.7的新锚点系统设置不好就会造成显示错误的错觉

    每次设置NGUI控件的锚点时,都需要刷新一下窗口,不然就会造成显示错误的错觉. 同时,NGUI控件设置锚点的参考对象为一个物体时还需要调整其控件大小,不然也会造成显示错误的错觉.

  2. 持续集成（CI）相关的一些工具，后续补充。。。。

    持续集成的目标:使项目开发更加便捷 1.make工具 最原始的工具,负责组织构建的过程,即指挥编译器如何编译,连接器如何链接,最后生成一个可用文件. 2.Ant工具 Ant是一个构建工具,它只有一个配 ...

  3. Python之*args,**kw

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #021ca1; background-color: #8e352 ...

  4. [转]Python数据挖掘

  5. 七牛php sdk 生成上传凭证时出现 undefined function Qiniu_SetKeys()

    将qiniu/http.php文件改名即可,原因是xampp等集成环境会安装pear存在了http.php

  6. EF6(CodeFirst)+MySql开发遇到的坑

    最近一不小心偷个懒就已经过了好几个月了,真是惭愧惭愧,出来混终究是要还的,我还是把”脱坑指南“写完吧,-＿-~~.点我打开上篇博客 0x001.架构名”dbo”の殇 坑之首也,当提架构名,在mssql ...

  7. Zookeeper--Zookeeper是什么

    Google的三篇论文影响了很多很多人,也影响了很多很多系统.这三篇论文一直是分布式领域传阅的经典.根据MapReduce,于是我们有了Hadoop:根据GFS,于是我们有了HDFS:根据BigTab ...

  8. 作业八—Alpha阶段项目总结

    一.项目的预期目标: 我们的图书管理系统之前的目标是做出可以让读者和管理员采用不同的搜索方式,并且时要做到读者和管理者两种不同的方式的!但是我们目前做到了部分搜索方式和管理员界面,主要原因是该项目如果 ...

  9. 使用抓包工具SpyNet对你的网络进行监控

    步骤1:下载并安装SpyNet Sniffer嗅探器之后,第一次运行SpyNet Sniffer后,将会弹出[Settings(设置)]对话框,在其中选择需要监听对象,如图所示. 步骤2:单击[Act ...

  10. Twain头文件

    #ifndef TWAIN#define TWAIN /************************************************************************ ...