关于移动端适配方案的一些代码

方法一：css中以rem为单位, 通过js方法统一换算根元素font-size

1. 以750px设计稿为基准（实际为iphone6 375px的2倍图）

2. 设置根元素fontSize在750时为100px=1rem;  在375时为50px=1rem, 这步操作通过一个统一的js方法进行换算，并在全局引用，使用于所有rem为单位的元素（三方ui库以px为单位不受影响）;

3. css定义样式使用rem为单位，以750px设计稿的基准除以100 换算所得；

4. eg: banner 高度在750px的设计稿上为100px, 此时css设置banner的高度为1rem

(function (window, document) {
	    function resize () {
	        var ww = window.innerWidth
	        if (ww > window.screen.width) {
	            window.requestAnimationFrame(resize)
	        } else {
	            /*
	                1. 以750设计稿(iphone6 375px 2倍图换算 )为参考基准， 100px = 1rem,
	                2. 这样写样式的时候直接按750px的写就好，rem就在px上/100即可，如一个banner是100px高，则使用rem即为1rem;
	                3. 但是实际iphone6只有375，所以下面换算的时候需要除以2, 让750px的设计稿对应真实375分辨率的iphone6
	                4. 若不在这里除2的话，只能在css样式时在除以100的基础上再除2，这样每个元素都要除2比较麻烦，还不如直接在根节点上除以2
	            */
	            ww = ww > 750 ? 750 : ww;
	            document.documentElement.style.fontSize = ww / 3.75 / 2 + 'px';      // set 1rem based on iPhone6 375px width, 375/3.75=100
	            document.body.style.opacity = 1
	            console.log(document.documentElement.style.fontSize)
	        }
	    }
	    if (document.readyState !== 'loading') {
	        resize()
	    } else {
	        document.addEventListener('DOMContentLoaded', resize)
	    }
	    window.addEventListener('resize', resize)
	})(window, document)

方法二：css中以px为单位,通过px2rem 和lib-flexible 实现单位转换及适配

1. 安装 lib-flexible模块 及 px2rem 模块 依赖

2. 在样式配置文件中配置px2rem的基准值，默认75（750px的设计稿）

3. 排除三方ui库的转换（通过配置exclued实现）

4. css 中使用和750px设计稿相同尺寸px（编译时会自动转换成rem）

//这里以750px设计稿、使用三方ui库为mint-ui为例，在postcss.config文件里修改   
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            remUnit: 75,
            exclude: /node_modules|mint-ui/i // px转rem时，忽略对mint-ui下样式px的转换（否则会让mint-ui里的样式都变的很小）
        }
    }
};