移动端h5页面不同尺寸屏幕适配方法

移动互联网时代，多端适配对于前端工作者来说带来了很多麻烦，有麻烦相应的就有解决方案，面对适配方法有很多，百分比布局。弹性布局，，还有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就可以

 

以上就是大概的解决方案，如果某位有更好的方法欢迎评论，互相交流，，，

 

 

本文也是通过自身项目学习及网上资料搜索汇集，如果雷同请不要奇怪，知识重在分享