1.1、响应式网页设计

响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑·马科特（Ethan
Marcotte）提出。他在A List Apart 发表了一篇开创性的文章，将三种已有的开发技巧（弹
性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个
术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、
自适应布局、跨设备设计以及弹性设计。

1.2、浏览器视口调试工具

Internet Explorer 用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址：http://www.microsoft.com/download/en/details.aspx?id=18359
Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）
Firefox 用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/）
Chrome 请下载Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh）

1.3、视口和屏幕尺寸

视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。在下面的截图中，实际的视口尺寸显示在右上角（1156×921像素），同时Firesizer 插件将窗口尺寸显示在右下角（1171×1023 像素）。

1.4、HTML5化繁为简

  • Doctype简化为<!DOCTYPE html>
  • 引用<script src="js/jquery-1.6.2.js" type="text/javascript"></script>简化<script src="js/jquery-1.6.2.js"></script>，type属性不是必需的。
  • 松散语法<sCRipt SrC=js/jquery-1.6.2.js></script>

5.新语义化标签

<!--制作标准的HTML 页面时，头部和导航一般都是标配，如下所示：-->

<div class="header">

<div class="navigation">

<ul class="nav-list">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="About">About</a></li>

</ul>

</div> <!—end of navigation -->

</div> <!—end of header -->

<!--看看我们用HTML5 如何实现：-->

<header>

<nav>

<ul id="nav-list">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="About">About</a></li>

</ul>

</nav>

</header>

2.1媒体查询

CSS3 是由很多附加模块组合而成的，媒体查询就是其中的一个模块。媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。

2.2媒体查询检测的特性

最常用的是设备的视口宽度（width）和屏幕宽度（device-width）。

  • width：视口宽度。
  • height：视口高度。
  • device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。
  • device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。
  • orientation：检查设备处于横向还是纵向。
  • aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。
  • device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。
  • color：每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。
  • color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
  • monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。
  • resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
  • scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。
  • grid：用来检测输出设备是网格设备还是位图设备。

2.3 IE8及更低版本增加媒体查询

Respond.js（https://github.com/scottjehl/Respond） ，但它目前无法解析CSS 的@import 命令。建议在已有的样式表中追加媒体查询样式。如下语法：@media screen and (max-width: 768px) {/*样式*/}

2.4 安装 iOS 模拟器和Android 模拟器

Android 软件开发工具包（SDK）也可以免费安装。下载地址是http://developer.android.com/sdk/。
iOS 模拟器是Xcode开发包（在Mac App Store 中免费下载）的一部分，只能在Mac OS X 上使用。

2.5 响应式设计中内容始终优先

窄视口设备的用户应该先看到主内容，而后再看到侧边栏。

3 拥抱流式布局

3.1

HTML5、CSS3响应式设计——笔记的更多相关文章

  1. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

  2. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  3. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  4. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  5. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  6. html5、css3及响应式设计入门

    一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...

  7. CSS3知识点整理（五）----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  8. Html5响应式设计与实现广场

    由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...

  9. 纯css3开发的响应式设计动画菜单（支持ie8）

    这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...

随机推荐

  1. linux 有趣的命令

    input: echo ' > ..XXX. .XXX.. > .XXXXY.TXXXX. > XXXXXYXTXXXXX > .VXXVYXTVXXX. > `.TYX ...

  2. linux 清除驱动对网卡的记录

    1.情况说明: 通过U盘做了一个linux 系统镜像(可读可写),设置eth0的ip=10.0.73.11.第一次启动的时候ip正确. 当我将该镜像)在另一台服务器启动的时候,无法通过10.0.73. ...

  3. 常用的 DOCTYPE 声明

    常用的 DOCTYPE 声明 HTML 5 <!DOCTYPE html> HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 ...

  4. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds 解决方法

    Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds. If the server requires ...

  5. css3 半个字符美化方法

    <html lang="zh-CN"> <head> <title></title> <meta charset=" ...

  6. CSS3 Animation

    animation:[<animation-name> || <animation-duration> || <animation-timing-function> ...

  7. js 所有事件列表

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  8. python 的重载

    python 的重载主要包括方法重载和运算符重载.1.python 方法重载: 其他的语言一般对于方法重载的话,主要是根据参数的类型不同或者是数量不同来区分同名的方法.而python则比较特殊,它本身 ...

  9. Minimum no. of iterations to pass information to all nodes in the tree

    Given a very large n-ary tree. Where the root node has some information which it wants to pass to al ...

  10. 【iCore3 双核心板】iCore3封装库及使用说明V1.0

    iCore3封装库及使用说明下载链接: http://pan.baidu.com/s/1pLq23Qb iCore3 购买链接: https://item.taobao.com/item.htm?id ...