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). 而且显示的时候是以动画的型式 ...
随机推荐
- 李洪强iOS经典面试题126
1.#import和#include的区别,@class代表什么? @class一般用于头文件中需要声明该类的某个实例变量的时候用到,在m文件中还是需要使用#import 而#import比起#inc ...
- 【android design】android常用设计资源
一.概述 大部分程序员擅长开发,但是对于设计却知之甚少.这直接导致,程序员在初期开发出来的应用(大多为兴趣或实用导向)中看不中用.因此,有必要搜集整合一些设计资源,这样既能减轻程序员在设计上所耗费的时 ...
- 使用 GCC 调试程序
系统 Ubuntu 调试示例: #include <stdio.h> int func(int n) { ,i; ;i<n;i++) { sum+=i; } return sum; ...
- C语言中指针的使用
什么是指针:指针就是一个变量,是一个存放内容的内存空间.指针存放的内容是另一个内存空间的起始地址.不同于一般变量存放的就是变量值.取值操作符*对于指针的作用是取得指针变量存放的内存地址里面的值,不加* ...
- HDU1978 记忆化搜索
How many ways Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 关于VS打包程序无法弹出主界面的问题
代码中的程序很正常,VS打包之后,无法弹出主界面的问题. 这种问题,一般是缺少程序加载所必须的东西,包括dll,配置文件等. (1)程序主界面使用的是DevExpress,DevExpress的相关类 ...
- app设计需注意的
手机上同步photoshop设计稿: ps play应用 设计: 资源: 1.音乐上传问题 音乐控制在2M以内,推荐使用[格式工厂]进行压缩. 2.视频上传问题 为了保证在线的播放效果,上传的视频大小 ...
- Color Space: Lab
Lab颜色空间是由CIE(国际照明委员会)制定的一种色彩模式.自然界中任何一点色都可以在Lab空间中表达出来,它的色彩空间比RGB空间还要大.另 外,这种模式是以数字化方式来描述人的视觉感应, 与设备 ...
- Eclemma各种安装方式以及安装失败解决
在线安装方法一: 在eclipse的菜单栏点击 Help -> Install New Software -> add Name:eclemma (名称可以随便填) Location:ht ...
- MySQL创建数据库并赋予权限
1.创建一个mysql用户并设置密码create user 'MySql用户名'@'localhost' identified by '密码';2.限制账户资源grant usage on *.* t ...