响应式web布局

响应式web：

   2010年，Ethan Marcotte提出（媒体查询+栅格布局+弹性图片）

• 设计理念：
  1）一个网页设计，多个设备使用；
  2）移动优先
• 用户体验：
  经过精心筛选，有选择性的显示页面内容。
• 技术层面：
  1）HTML5+CSS3基础网页设计
  2）HTML5的viewport提供可视化窗口
  3）CSS3媒体查询（@media）可以针对不同尺寸的页面进行渲染
  ( 支持chroma 21;IE9;Firefox3.5;sarfare4.0;opear9)
  针对不同的媒体界面使用不同css
  4）流式布局： 页面的元素根据屏幕的大小自动调整结果，以及浏览器的高度。（使用百分比定义宽度，px定义高度）大屏手机有的宽度很长，高度不变，无法流式显示。
  5）流式图片：随流式布局进行相应缩放
  6）响应式栅格系统：根据屏幕大小不同调整屏幕

2.viewport提供可视化窗口
<meta name="viewport" content="width=device-width,initial-scale=1.0">
3.CSS3媒体查询（@media）
@media screen and(max-width:300px){
body{
     background:blue;
   }
}
4.ipad+iphone:
@media only screen and(max-width:1024px)and(min-width:768px){}
@media only screen and(max-width:768px)and(min-width:320px){}

注释：
width：控制viewport大小，可以指定一个值或特殊值
（单位缩放100%）。
device-width:设备宽
initial-scale:初始缩放比例（当页面第一次进行load时）
maximum-scale:最大缩放比例
minimum-scale:最小缩放比例
user-scalable:用户是否可以手动缩放