字体适配:
安装
cnpm install postcss-pxtorem --save-dev
配置
// vue.config.js
// 然后在reset.css里面设置基础字体大小,如果不想让字体改变可以使用PX
const pxtorem = require('postcss-pxtorem')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './',
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
additionalData: '@import "@/assets/scss/base.scss";'
},
postcss: {
postcssOptions: {
plugins: [
pxtorem({
rootValue: 100, // 我这里是设置的是px是rem的一半,直接可以量多少写多少
propList: ['*'] // 对所有 CSS 属性生效
}) // 使用 px2rem 插件
]
}
}
}
}
})
屏幕适配:
// utils/rem.js
/* 字体大小 */
const baseSize = 100 / 2
/* 屏幕大小 */
const baseWidth = 375
const setHtmlFontSize = () => {
const windowWidth = window.innerWidth
document.querySelector('html').style.fontSize = windowWidth / baseWidth * baseSize + 'px'
}
setHtmlFontSize()
window.addEventListener('resize', setHtmlFontSize, false)
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/utils/rem'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')