移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局。弹性布局,,还有rem布局 今天主要针对rem布局讲解一下;
本方法是阿里手淘的页面方法,详细讲解就不多赘述,,下面附上链接自行查看http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html,,
本文主要讲使用方法 flexible
第一种方法是将文件下载到你的项目中,然后通过相对路径添加:
或者直接加载阿里CDN的文件:
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就可以
以上就是大概的解决方案,如果某位有更好的方法欢迎评论,互相交流,,,
本文也是通过自身项目学习及网上资料搜索汇集,如果雷同请不要奇怪,知识重在分享