弹性布局
所谓的弹性布局，说的是在创建网站的时候，采用流体网格布局方式，动态地调整网站布局宽度以此来适应各种设备屏幕大小。弹性布局不使用固定的测量单位，比如像素或者英寸。原因显而易见，视窗（ viewport ）的高度和宽度在不同设备之间是不断变化的，那么弹性网站布局为了适应这种变化，所以就不可能明确的指定网站内容的宽度和高度，只能使用相对长度单位。那么怎么得到相对长度呢？ 一个可靠的计算公式，可以用来确定弹性布局的比例值。用一个元素的宽度target 除以它的父元素的宽度parent，那得到的计算结果result就是这个元素的相对宽度,也就是我们常用的百分数。
弹性媒介
网站中的图片、视频、Flash 动画等等，在变为响应式的时候不能简单的按照流体网格计算公式来变化。
网站上的图片、视频、Flash 等就是所谓的媒介。随着浏览器窗口大小的改变，网站上媒介的布局不一定变得很合适，有时候它们会超出其容器的界限，因此图片、视频和其它媒介类型应该具备可伸缩性，能根据浏览器窗口的大小，自动调整自身尺寸，保证页面布局整齐一致。一个简单的方法，是把它的 max-width 属性值设置为 100%，意思是说它的最大宽度就是其容器的宽度。这样就能确保当浏览器窗口变小的时候，则网站上的媒介会依据其容器的大小而缩小尺寸，始终包裹在容器内。
若使用 em 单位的元素定义了 font-size为12px，则此时1em==12px，那2em==24px若没有，则找其父元素的字体大小，依次类推直到html元素；若整个页面没有定义字体大小，而是使用浏览器默认字体大小 16px，则1em==16px。这样若某些CSS属性使用了em单位，只要改变与其相关联的字体大小，就能改变这些属性值。再稍微说一下 rem（ root em 的简写 ），它与 em 相似，但 rem 仅仅是相对于 html 根元素的 font-size 而言的。这样一旦设置了一个基本字体大小，定义其它长度就容易了，比em使用起来简单。不足之处就是，牵一发而动全身。对于百分比，就是根据 Ethan 的公式，得到的结果乘以 100%。既然对这三个相对长度单位有了一定了解，那在响应式网站中如何使用它们呢？一般而言，对于响应式网站，水平方向为流体网格布局，那宽度、左右间距和左右内边距的长度自然采用百分比。像高度、上下间距，还有字体大小等与垂直方向相关的属性则应该使用 em 或者 rem 单位。
①文本布局将包裹的层设定宽度并居中②字体样式使用小米官网字体③对于图片设定百分比宽度，重点是转块后margin0auto才发挥作用。