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. 李洪强iOS经典面试题128

    1.写一个NSString类的实现 + (id)initWithCString:(c*****t char *)nullTerminatedCString encoding:(NSStringEnco ...

  2. error while loading shared libraries: libXXX.so.x: cannot open shared object file: No such file or directory .

    转载:http://www.eefocus.com/pengwr/blog/2012-02/235057_baf52.html 此时你可以locate libXXX.so.x 一下,查看系统里是否有该 ...

  3. android-ImageView及其子类

    一.知识概要 ImageView继承自View,能显示任何Drawable对象; ImageView支持的常用XML属性及相关方法: android:adjustViewBounds    设置Ima ...

  4. iBatis in 语句参数传入方法

    刚刚开始在工作中用到iBatis 在用到in去查询或者删除 我本来是传递一个String的参数,但是总是报以下的错误

  5. # 20145334赵文豪 《Java程序设计》第5周学习总结

    20145334赵文豪 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 1.使用try.catch打包System.in.read(),声明throws java.io.IO ...

  6. dom4j解析xml文档(增删改查)

    package itcast.dom4j; import java.io.File; import java.io.FileOutputStream; import java.io.FileWrite ...

  7. PHP Header下载文件在IE文件名中文乱码问题

    解决PHP Header下载文件在IE文件名中文乱码有两种常见的,一种是是把页面编码改成utf8,另一种是对中文url进入urlencode编码,根据UA检测,区别下载,就可以解决了 $filenam ...

  8. 20145224&20145238《信息安全系统设计基础》实验一 开发环境的熟悉

    20145224陈颢文20145238荆玉茗 <信息安全系统设计基础>第一次实验报告 课程:信息安全系统设计基础 班级: 1452 姓名:荆玉茗 陈颢文 学号:20145238 20145 ...

  9. 设置sublime text2/3中默认预览浏览器快捷键的方法

    各位前端大神们,大家在用IDE编辑器的时候喜欢用哪些呢?是Dreamweaver.Zend Studio.editplus又或者是sublime text?今天马浩周给大家就要说说设置sublime ...

  10. Java-马士兵设计模式学习笔记-代理模式-聚合与继承方式比较

    一.概述 1.目标:要在Tank的move()方法做时间代理及日志代理(可以设想以后还要增加很多代理处理),且代理间的顺序可活更换 2.思路: (1)聚合:代理类聚合了被代理类,且代理类及被代理类都实 ...