响应式布局

1.媒体查询+rem
利用媒体查询监听页面的尺寸，设置不同尺寸下HTML页面根节点font-size的大小，然后页面中的组件的高度宽度的大小用rem做单位。
2.lib-flexible.js + px2rem.js
先将页面中的组件的大小用px做单位，之后用px2rem插件将组件宽度高度的单位转换成rem，在px2rem中设置页面的基准为75或192（自己根据设计稿而定），字体的话用em做单位，然后用媒体查询设定不同尺寸下body中font-size的大小，得到字体的自适应（因为以rem为单位的话，当页面宽度太小时，则HTML的font-size也会特别小，则字体也会变得特别小，但字体font-size最小为12px）。
再引用lib-flexible.js，它的主要作用是将页面宽度分为10等份，并把HTML的根节点的font-size设置为一等份的大小，并且在HTML文件的 < head> < /head>会自动添加

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />