1.流体布局的概念：流体布局是页面元素的宽度根据屏幕分辨率进行适配和调整，但整体布局保持不变。设计方法：布局按百分比定义宽度，但高度大多由px固定。缺点：虽然可以适配各种屏幕，但是显示效果极差。（有些手机页面的宽度会被拉长，但是高度不会变化，很不协调。）大量的百分比布局也会带来很多兼容性问题。2、静态布局概念：静态布局是指无论浏览器大小如何，网页上所有元素的大小都以px为单位。这种设计常用于PC端的设计方式：结合min-width，小于这个宽度会出现滚动条，大于这个宽度会有留白的缺点：有太多大屏手机两边有很多空白，会出现页面。比较小，操作按钮也比较小。这种设计只适用于PC端，移动端严重不兼容。3、媒体查询@media概念：媒体查询是css3的一个新属性，针对不同的屏幕分辨率定义了一种布局风格，即元素的位置和大小会发生变化。设计方法：根据不同的分辨率设计所需元素的位置和大小//适配iphone5@mediascreenand(max-width:320px){html{font-size:14px;}.name{font-size:14px;顶部边距：28px；}}//适配宽度在321px-413px之间@mediascreenand(min-width:321px)and(max-width:413px){html{font-size:16px;}.name{font-size:16px;边距顶部：32px；}}//适配宽度在414px-639px之间@mediascreenand(min-width:414px)and(max-width:639px){html{font-size:17px;}.name{font-size:17px;边距顶部：34px；}}//适配宽度大于640px@mediascreenand(min-width:640px){html{font-size:18px;}.name{font-size:18px;边距顶部：36px；}}缺点：要匹配足够多的屏幕尺寸，工作量大，维护难度大，需要足够的耐心媒体查询也有限，可以枚举的只能适配主流的宽高4.设置视口缩放概念：通过提供页面的一些元信息，位于文档头部的
标签中进行缩放设计方法：
通过设置最大缩放比例maximum-sacle和最小缩放比例minimum-scale来兼容Screen。缺点：全局缩放可能会导致错误。一般不单独使用，可以和媒体查询或者rem单元结合使用。5、rem与屏幕成正比的概念：rem是css3新加入的相对长度单位，是根元素（即html元素）font-size计算值的倍数。通过设置html的字体大小来控制rem的大小。设计方法：1）@media媒体查询在css中定义根元素的font-size。使用@media媒体查询改变html的字体大小，实现不同设备的兼容。//适配iphone5@mediascreenand(max-width:320px){html{font-size:14px;}//1rem=14px}//适配宽度在321px-413px@mediascreenand(min-width:321px)and(max-width:413px){html{font-size:16px;}//1rem=16px}//适配宽度在414px-639px之间@mediascreenand(min-width:414px)and(max-width:639px){html{font-size:17px;}//1rem=17px}//适配宽度大于640px@mediascreenand(min-width:640px){html{font-size:18px;}//1rem=18px}根元素设计好后，页面所有元素的位置和大小单位都写成rem。2）js动态计算font-size大小。使用@media设置根元素的字体大小不能完全适配所有设备。使用js计算font-size可以实现全适配。在标签中，这个标签放在里面。6、引用flexible.js的概念：flexible.js是阿里团队的一个开源库，可以方便的兼容各种移动设备自适应问题设计方法：1）结合viewport，利用它把viewport引入<页面的head>
2）引入flexible_css.js，灵活。jsinthe
//加载阿里CDN文件也可以把这两个文件下载到自己的项目中，然后导入，效果是一样的。3）页面单位采用rem格式，有些插件可以快速转换px->rem，比如sublimetext3的CSSREM插件，可以完成自动转换。除了使用编辑器插件，还可以使用css预处理器，比如scss，里面的函数，混合宏。另一个npm工具是px2rem，或者使用PostCSS。这两个适合大型项目，因为可以配合gulp或者webpack使用，但是不适合单页面。4）页面效果配置flexible.js后，在页面上可以看到它为元素添加了data-dpr属性和font-size属性，两者会根据不同的手机分辨率值动态变化。缺点：不适合平板，不兼容其他UI框架组件，如：vux、weui、miniui等。由于市面上的一些UI组件已经适配，结合flexible，整体组件会减少，但是处理起来会比较麻烦。7、vw、vh、vmax、vmin属性的概念：vw、vh是css3新的单位属性，是相对于视口的宽高计算的。相对于视口的宽度或高度，以较大者为准，将视口平均分为100个单位vmax。其中最大的值除以相对于视口宽度或高度的100个vmin单位，以较小者为准。最小的被分成100个单位。设计方式：元素的位置和大小都是以vw,vh,vmax,vmin为单位缺点：兼容性问题，部分手机不兼容这个单位总结：单个H5页面font-size可以改通过动态计算js。大型项目如webpack项目可以使用rem+flexible+sass
