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. nginx切割日志

    #!/bin/bash ## Nginx 日志文件所在的目录 LOGS_PATH=/usr/local/nginx/logs ## 获取昨天的 yyyy-MM-dd YESTERDAY=$(date ...

  2. [ASE][Daily Scrum]12.05

    占坑 最近大家都很忙所以工作准备放到周末来做……所以这两天进度会比较慢.

  3. Linux之源码包安装软件

    安装准备      安装c语言编辑器 gcc      压缩包  node-v6.2.0-linux-x64.tar.gz   源码包保存位置  /usr/local/src/ 源码包安装位置 /us ...

  4. 使用WMI和性能计数器监控远程服务器权限设置

    应用场景:在web服务器中,通过.NET编码使用WMI查询远程服务器的一些硬件配置信息,使用性能计数器查询远程机器的运行时资源使用情况.在网上没有找到相关的东西,特记录与大家共享. 将web服务器和所 ...

  5. linux 2.6 驱动笔记（一）

    本文作为linux 2.6 驱动笔记,记录环境搭建及linux基本内核模块编译加载. 环境搭建: 硬件:OK6410开发板 目标板操作系统:linux 2.6 交叉编译环境:windows 7 + v ...

  6. Java多线程11：ReentrantLock的使用和Condition

    ReentrantLock ReentrantLock,一个可重入的互斥锁,它具有与使用synchronized方法和语句所访问的隐式监视器锁相同的一些基本行为和语义,但功能更强大. Reentran ...

  7. 人人都是 DBA（XIII）索引信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  8. 《CLR.via.C#第三版》第二部分第4，5章节读书笔记(二)

    这两章全是理论性的东西,我觉得不必过于钻牛角尖.理论这东西,只有在长期的实践中去慢慢领悟才会深刻.下面我只写些我认为重要的关键知识. (一)类型转换 知识点:向基类型的转换被认为是一种安全的隐式转换: ...

  9. 案例研究：Web应用间歇性SqlException

    最近有客户找到我,说他们生产环境的事件日志中有下面的报错.要我帮忙找找原因. Event Type: Warning Event Source: ASP.NET 2.0.50727.0 Event C ...

  10. django开发个人简易Blog——数据模型

    提到数据模型,一定要说一下MVC,MVC框架是现代web开发中最流行的开发框架,它将数据与业务逻辑分开,减小了应用之间的高度耦合.个人非常喜欢MVC开发框架,除了具有上述特性,它使得web开发变得非常 ...