El proyecto Vue adapta el diseño rem
El principio de rem divide el píxel físico px en cien partes, y cada parte es 1rem. Por ejemplo, cuando su teléfono móvil es un Apple 6s y el píxel físico es 375 px, la conversión a rem es 37.5 px. El complemento establece el atributo de fuente font-size de la etiqueta raíz html en 1rem y convierte el px en css al correspondiente rem mediante conversión. Cuando se amplía el tamaño de la pantalla, al cambiar el tamaño de fuente en html puede darse cuenta de que el tamaño y la distancia de otras etiquetas también se escalan para lograr un diseño adaptable rem.
1) dependencias de instalación
npm i lib-flexible postcss-px2rem --save
2) Elimine la etiqueta de la ventana gráfica <meta name = 'viewport'> en index.html
Flexible agregará automáticamente <meta name='viewport' >etiquetas, control dinámico initial-scale，maximum-scale，minimum-scaley otros valores de atributos a la página de acuerdo con la pantalla . Si no se eliminan, se producirán adiciones repetidas y se generará una redundancia de código.
3) Introduce dependencias en el archivo de entrada main.js
import 'lib-flexible'
4) Configure el archivo vue.config.js
module.exports = {
devServer: {
port: 3000,
open: true
},
// rem 的配置
css: {
loaderOptions: {
css: {
},
postcss: {
plugins: [
require('postcss-px2rem')({
// 适配375px屏幕 设计图750中量出来的尺寸要 / 2
remUnit: 37.5
})
]
}
}
}
}