移动端适配问题

移动端适配问题

以常用的iphone6/7/8的屏幕,375px的设计稿来说

//rem.js

document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 375 * 100 + 'px'

window.onresize = function () {
  document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 375 * 100 + 'px'
}

//在入口文件中引用
import { createApp } from 'vue'
import App from './App.vue'
import './style/main.scss'
// 移动端适配
import './utils/rem'
import  store from './store/index'

createApp(App).use(store).mount('#app')

此时在iPhone678屏幕上，html的font-size为100px.
设计稿上的元素宽度为100px的时候，只需要写1rem即可,
无论在那种移动设备屏幕上都做到了兼容。