流式布局（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-600px) and (max-1200px){
background:red
} //意思是屏幕的宽在600像素到1200像素之间，背景是红色；
外部引入样式
<link rel="stylesheet" href="1.css" media="all and (min-1024px)" /> 最小屏宽在1024像素下采用1.css 样式文件 （适用于pc端）
<link rel="stylesheet" href="2.css" media="all and (min-640px) and (max-1024px)" /> 最小屏宽在640像素下，最大屏宽在1024像素下采用2.css样式文件 （适用于平板）
<link rel="stylesheet" href="3.css" media="all and (max-640px)" /> 最大屏宽在640像素下采用3.css样式文件 （适用于手机）
这就是响应式的思想