移动端H5终端适配方案

1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。a.手淘方案 flexible+rem（参考https://github.com/amfe/article/issues/17）　　引入flexible.js，不需要在html结构中加入viewport标签。flexible.js会在<html>元素上增加一个data-dpr属...

weixin_30256505

88人浏览 · 2017-06-08 17:52:00

weixin_30256505 · 2017-06-08 17:52:00 发布

1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。

a.手淘方案 flexible+rem（参考https://github.com/amfe/article/issues/17）

　　引入flexible.js，不需要在html结构中加入viewport标签。

flexible.js会在<html>元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3；同时会给html加上对应的font-size的值，比如说75px；以及会添加viewport标签，JS会根据不同的设备添加不同的缩放比(建议内联处理，在所有资源加载之前执行这个JS)

　　例如：设计稿是750px宽度，将750px进行10等分，则1rem=75px,

　　　　　如果设计稿中量出某块区域的margin-top值20px，对应换算成rem为20/75=0.266667rem。

　　　　 css代码就是margin-top:0.266667rem。

b.不引入第三方库，自写js动态设置html的font-size+rem

        (function (doc, win) {

        var docEl = doc.documentElement,//根元素html

        //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

        var clientWidth = docEl.clientWidth;

        if (!clientWidth) return;

        //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
　　　　　　
        docEl.style.fontSize = 16* (clientWidth / 375) + 'px';

        };

        //alert(docEl)

        if (!doc.addEventListener) return;

        win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值

        doc.addEventListener('DOMContentLoaded', recalc, false)//绑定浏览器缩放与加载时间

        })(document, window);

　　js会根据不同设备的宽度设置html的font-size，html结构需要加入

　　屏幕根据设计稿的比例转换对应的rem值，比如：

　　750的设置 = 16*(clientWidth/375)

　　640的设置 = 20*(clientWidth/320)

　　320的设置 = 10*(clientWidth/320)

　　例如：设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），如果设计稿中量出某块区域的margin-top值20px，

　　　　　在实际iphone6设备375px宽度中，应该除以2，所以得到值mragin-top是20/2=10px,

　　　　　因为1rem=16px（16*（iphone6设备宽度/375）+'px'）,所以对应换算成rem为10/16=0.625rem。

　　　　　css代码中就是margin-top:0.625rem。

2.flex布局，不使用rem，直接使用px。

　　html结构需要加入<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

　　例如：设计稿是750px宽度，设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），