rem布局及响应式布局

　　流式布局（100%布局）（可能：做的页面不是很美观）效果与弹性布局一样

　　不设置宽高：表示宽 auto

　　最外层：保证100%

　　等比例缩放的算法：  320/10  已知的一个比例  =  已知的宽/x    x就是想得到的值；

　　弹性/流式，布局比较容易，但是里面的内容显示的比例，在不同设备下会有偏差；

　　rem布局：可以保证布局是等比列缩放：

　　rem：是单位，有根节点的字体大小决定，html：就是根节点

　　　　案例：html{font-size:100px}　　那么在此页面中1rem=100px

　　　　案例：body{font-size:12px}　　可以让下面的元素，字体大小默认为12px    这种做法为字体大小节流     但不影响rem的使用，因为rem的只能在根节点设置；

　　建议大家使用适配的插件：如果实际开发的话

　　为什么要用rem？

　　　　用rem开发320尺寸页面，如果想更改320尺寸页面为460尺寸的页面，只需要给html的font-size就可以了（前提条件，文件内容的单位都是rem），如果是弹性或流式布局的话，

　　　　我们还要对文件内容的比例进行微调，很麻烦，效率低；

　　所以：在rem中，尽量保持单位是rem

　　em单位：是由父级的font-size决定的          rem单位：有html根节点决定的   （区别）

　　所以：针对rem的适配，就可以保证在什么情况下都保持一致；

　　响应式布局：在不同设备上呈现的页面，布局不一样，这种布局方式就是响应式；

　　响应式：靠媒体查询实现的 @media      (@定义的意思)

　　@media的作用：

　　　　可以定义视口

　　　　可以定义宽高  （这个用的多）

　　　　可以定义像素比

　　　　可以定义设备的朝向

　　语法： @media 设备类型 and (属性:条件带单位)

　　设备类型：

　　　　scroll：代表屏幕设备；

　　　　all：代表所有；（通常用）

　　属性有：

　　　　宽 （width）  高（height）

　　　　device-pixel-ratio（设备比dpr）

　　案例：

　　　　@media all and (min-width:600px) and (max-width:1200px){

　　　　　　background:red

　　　　}           //意思是屏幕的宽在600像素到1200像素之间，背景是红色；

　　外部引入样式

　　　　<link rel="stylesheet" href="1.css" media="all and (min-width:1024px)"  />　　最小屏宽在1024像素下采用1.css 样式文件   （适用于pc端）

　　　　<link rel="stylesheet" href="2.css" media="all and (min-width:640px) and (max-width:1024px)"  />　　最小屏宽在640像素下，最大屏宽在1024像素下采用2.css样式文件 （适用于平板）

　　　　<link rel="stylesheet" href="3.css" media="all and (max-width:640px)"  />　　最大屏宽在640像素下采用3.css样式文件  （适用于手机）

　　这就是响应式的思想