vue 项目设置移动端rem

第一种直接设置

fnResize();
window.onresize = function () {
  fnResize();
}

function fnResize() {
  document.documentElement.style.fontSize = 100 / 750 * window.innerWidth + 'px';
}
// 禁止双击放大
document.documentElement.addEventListener('touchstart', function (event) {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
}, false);
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
  var now = Date.now();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

在maain.js中引用改方法

import { createApp } from 'vue';
import App from './App.vue'
import router from './router'
import fnResize from './util/setRem'
// import "./plugins/element.js"
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';


const app = createApp(App)
fnResize
app.use(router)
app.use(ElementPlus)
app.mount('#app')

使用中直接将设计图中的px/100,就是所需的rem值
第二种使用sass在计算
1在index.html中添加

	var dpr = window.devicePixelRatio;
    var meta = document.createElement('meta');

    // dpr
    meta.setAttribute('content', 'initial-scale=' + 1 / dpr + ', maximum-scale=' + 1 / dpr + ', minimum-scale=' + 1 / dpr + ', user-scalable=no');
    document.getElementsByTagName('head')[0].appendChild(meta);
    // rem
    document.addEventListener('DOMContentLoaded', function (e) {
    document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
    }, false);

2，在使用中的css中使用，会直接转换成rem

<style scoped lang="scss">
	$ue-width: 750;
	@function px2rem($px) {
	  @return #{$px/$ue-width*10}rem;
	}
	count {
	    background: url('../../static/img/index/partner-index.jpg') no-repeat;
	    width: px2rem(750);
	    height: px2rem(1334);
	}

第三种

export default {
  setRemFn(doc, win) {
    let docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        let clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        if (clientWidth >= 750) {
          docEl.style.fontSize = '100px';
        } else {
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        }
      };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  }
}

main.js设置

import setRem from "../utils/setRem";
setRem.setRemFn(document, window)