移动互联网时代，多端适配对于前端工作者来说带来了很多麻烦，有麻烦相应的就有解决方案，面对适配方法有很多，百分比布局。弹性布局，，还有rem布局 今天主要针对rem布局讲解一下；
本方法是阿里手淘的页面方法，详细讲解就不多赘述，，下面附上链接自行查看/mobile/lib-flexible-for-html5-layout.html，，
本文主要讲使用方法flexible
第一种方法是将文件下载到你的项目中，然后通过相对路径添加:
<script src="build/flexible_css.debug.js"></script><script src="build/flexible.debug.js"></script>
或者直接加载阿里CDN的文件：
<script src="/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
flexible实际上就是能过JS来动态改写meta标签控制font-size的值
然后页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。
页面里面所有涉及到px的地方都可以改成rem， 1rem=75px 按照这个公式换算皆可以，至于为什么这么计算请参考上面链接
对于字体font-size 建议不适用rem 可以媒体查询自己手动改写字体大小
第二种方法
< script > (function(doc, win) { var docEl = doc.documentElement; resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize'; recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 50 * (clientWidth / 375) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); } (document, window)); < /script>
通过js直接控制也行
第三种方法
设置html{ font-size: calc(100vw/7.5); } 然后全局px替换为rem就可以
以上就是大概的解决方案，如果某位有更好的方法欢迎评论，互相交流，，，
本文也是通过自身项目学习及网上资料搜索汇集，如果雷同请不要奇怪，知识重在分享
