HTML5、CSS3响应式设计——笔记
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响应式设计——笔记的更多相关文章
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- html5、css3及响应式设计入门
一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...
- CSS3知识点整理（五）----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
- Html5响应式设计与实现广场
由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...
- 纯css3开发的响应式设计动画菜单（支持ie8）
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
随机推荐
- ckeditor简单的演示
先把ckeditor文件添加到项目中 然后在页面上引用 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- Java开发搜索引擎爬虫
package com.peidon.html; import java.io.BufferedReader; import java.io.File; import java.io.FileOutp ...
- 一次熬夜解决的java乱码问题
在java API中String有一个方法 public byte[] getBytes() Encodes this String into a sequence of bytes using t ...
- c++20701除法（刘汝佳1、2册第七章，暴搜解决）
20701除法 难度级别: B: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 输入正整数n,按从小到大的顺序输出所有 ...
- php课程---Ajax（老师详解）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MySQL 启动时禁用了 InnoDB 引擎的解决方法
今天在从本地数据库复制表数据到虚拟机 CentOS 6.6 上的数据库时,得到提示: Unknown table engine 'InnoDB' 于是在服务器 MySQL 中查看了引擎: mysql& ...
- java FileLock
import java.nio.ByteBuffer; import java.nio.IntBuffer; import java.nio.channels.FileChannel; import ...
- 转贴: 更改Outlook2013数据文件的位置
转自: 老田博客 近日体验了一下微软OFFICE 2013 说实话 除了与skydriver深度整合实现云同步文档外 其他的功能对我这样的『Light User』实在是大材小用 wps足够了 在使用过 ...
- HAProxy 实践(一)
运行环境 OS: Deiban 7 软件:haproxy 1.5.8 HTTP Server: 192.168.99.1:8520 192.168.99.1:8530 192.168.99.1:854 ...
- PHP环境下Memcache的使用方法
原文:PHP环境下Memcache的使用方法 原文地址:http://www.2cto.com/kf/201503/384967.html 如今互联网崛起的时代,各大网站都面临着一个大数据流问题,怎么 ...