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. java-集合类

    框架图 集合类 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式.数组和集合类同是容器,有何不同?数组存储同一类型的基本数据类 ...

  2. 对于新安装的MySQL如何提升MySQL的安全级别

    一 作为最流行的开源数据库引擎,MySQL本身是非常安全的.即便如此,你仍然需要添加额外的安全层来保护你的MySQL数据库不受攻击,毕竟任何经营网上在线业务的人都不想冒数据库受到损坏的风险.接下来,我 ...

  3. C++模板&泛型编程

    ---恢复内容开始--- 一.泛型编程 定义:编写与类型无关的逻辑代码,是代码复用的一种手段.模板是泛型编程的基础 模板分为:函数模板和类模板 函数模板:代表了一个函数家族,该函数与类型无关,在使用时 ...

  4. （转载）JAVA敏捷开发环境搭建

    整个软件项目分为四个环境 开发本地环境.开发环境.测试环境.IDC环境.和传统C++开发不一样的模式是多了第一个开发本地环境.这是为什么呢,因为目前大部分开发人员还是比较熟悉windows下开发.对于 ...

  5. linux-15基础命令之-用户与用户组(useradd,userdel,usermod,passwd,groupadd)

    1.useradd 命令用于创建新的用户,格式为:useradd[选项] 用户名 useradd参数 参数 作用 -d 指定用户的家目录(默认/home/username) -D 展示默认值 -e 帐 ...

  6. 基于SignalR的web端即时通讯 - ChatJS

    先看下效果. ChatJS 是基于SignalR实现的Web端IM,界面风格模仿的是“脸书”,可以很方便的集成到已有的产品中. 项目官网:http://chatjs.net/ github地址:htt ...

  7. 软件工程day8

    设计出一份demo.上报于组,等待修改意见. 色调为黑白灰,图像也很简洁,符合“快捷查询工具”的主题.

  8. 我的ORM之七-- 权限

    我的ORM索引 权限范围 权限可以控制以下部分: 页面 按钮 表格列 (未完成) 菜单表的行 其中: 页面权限,需要在程序请求之前进行判断. 按钮权限,表格列权限,需要在请求页面之后,通过JavaSc ...

  9. 用UWP实现一个和win10设置页面类似的布局

    不知道有人注意过Win10中的设置页面的布局没?那个页面会根据不同的窗口宽度来调节显示的内容,甚至来后退按钮的操作在不同的宽度也是不同的,看图: 是不是有点cool呢,这篇文章,我们就来做一个类似的布 ...

  10. 四则运算的实现（C++）重做

    #include <iostream> using namespace std; void main() { int a0[1000],b0[1000],c0[1000],a1[1000] ...