移动端的自适应

/*
	rem，适配文件
*/

;
(function(win){
	var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    // 设备像素比
    var devicePixelRatio = win.devicePixelRatio;
    var tid;

    metaEl.setAttribute("content", "initial-scale=.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no viewport-fit=cover")

    function refreshRem(){
    	var width = docEl.getBoundingClientRect().width;
        console.log(width)
    	var ua = navigator.userAgent.toLowerCase();

        // 判定普通手机
    	if (!/ipad/.test(ua)) {
            if (width / 2 > 750) {
                width = 750 * dpr
            }

            var rem = width / 10;
        	docEl.style.fontSize = rem + "px";
        }
    }
    refreshRem();

    win.addEventListener("resize",
    function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300)
    },
    false);

    win.addEventListener("pageshow",
    function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300)
        }
    },
    false);

})(window)

全局引用

//导入需要使用的包，和java一样，vue是块作用域，如果想要使用其方法必须先进行导入导出才能使用
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store'
import './assets/js/rem'
import './assets/css/reset.css'

因为使用的vue所以我直接挂载在main中了这样就能直接使用。当然写移动端肯定使用了vue框架或是react框架，暂时只测试了vue中是否能够执行，并不清楚react是否能够如此使用。