[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)

[笔记]html5+css3 响应式设计(RWD,Responsive Web Design)[概述+媒体查询]
书名：<Web设计：HTML5和CSS3实战>
一 概述
1. 为了能够使「一个页面,支持各种客户端屏幕分辨率大小[pc,mobile,pad]」成为可能，Ethan Marcotte提出了响应式网页设计。
将3种已有的开发技巧【弹性网格布局，弹性图片，媒体和媒体查询】整合后，命名为【响应式网页设计(流式设计，弹性布局，塑料布局，流体设计，自适应布局，跨设备设计，弹性设计)】
2. 一句话概括：针对【任意设备】对【网页内容】进行【完美布局】的一种显示机制。
3. html5语义标签和css3字体，动画，变换等功能，给RWD提供了更多可能性
4. 不再迷恋 【像素px】,使用相对度量单位【em或百分比】
5. 视口（ViewPort）：页面实际显示区域
屏幕尺寸：设备物理显示区域
6. 【响应式网站】无法替代真正的【移动网站】

二 媒体查询
根据设备显示器特性【视口宽度，屏幕比例，设备方向】设定css样式
1. 使用
1-1) css文件：
@media screen and （max-width: 960px）{
body{
background-color: red;
}
}
1-2) <link>标签：
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css">
<link rel="stylesheet" type="text/css" media="screen and ( orientation: portrait) and (min-width: 800px), projection" href="xxx.css">
纵向的宽度大于800px的屏幕或投影仪的时候，加载xxx.css
1-3) css文件里的import
@import url("xxx.css") screen and (max-width:360px); 会增加http请求，影响加载速度

2 可检测特性
width[视口宽度],height[视口高度],device-width[屏幕宽度],device-height[屏幕高度],orientation[屏幕纵横],aspect-ratio[视口宽高比16：9=16/9],device-aspect-ratio[屏幕宽高比],color[xx位色min-color: 16],