Índice
1. Solução de adaptação de terminal móvel: combinação de plug-ins amfe-flexível e postcss-pxtorem
amfe-flexible : Configure o esquema de layout escalável, definindo principalmente 1rem para viewWidth/10. De acordo com a largura do dispositivo, modifique o tamanho do elemento raiz html para se adaptar aos diferentes terminais.
postcss-pxtorem : É um plug-in para postcss, usado para gerar unidades rem a partir de unidades de pixel. Ele pode converter automaticamente px em rem e lidar com algumas situações especiais.
Etapa 1: instale dois plug-ins
npm i amfe-flexible --save-dev
npm i postcss-pxtorem --save-dev
Etapa 2: importar amfe-flexível no arquivo main.js
import 'amfe-flexible'
Etapa 3: configurar postcss-pxtorem em vue.config.js
const {
defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
// 配置css前缀,px转rem
css: {
loaderOptions: {
postcss: {
postcssOptions:{
plugins: [
//autoprefixer(),
require("postcss-pxtorem")({
rootValue: 256,
// rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为2560，即rootValue设为256
propList: ["*"]
})
]
}
}
}
},
});
Copie este bloco de código para seu vue.config.js
Você também pode configurá-lo em postcss.config.js. Caso contrário, crie-o no diretório raiz do projeto.
module.exports = {
"plugins": {
'postcss-pxtorem': {
rootValue: 192,
propList: ['*']
}
}
}
// rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192
2. Solução visual de adaptação para tela grande: com foco no atributo de escala da transformação em css3
1. Os requisitos básicos para adaptação a ecrãs grandes devem respeitar os três pontos seguintes:
1. Nenhuma barra de rolagem pode aparecer horizontalmente ou verticalmente
. 2. Pode ser tela cheia (ou seja, modo de tela cheia F11)
. 3. Não importa o tamanho da tela, a página não pode ser deformada. É melhor que não haja problema. pode ser visto a olho nu.
2.Solução
1. Adapte-se à escala do css3. Princípio: Assumimos que usamos unidades px para escrever a página normalmente de acordo com o desenho de design 1920×1080 e, quando a página muda, usamos escala para ampliar ou reduzir dinamicamente a adaptação 2.rem, usando amfe-flexível e postcss-
pxtorem plug-ins para combinar
adaptação 3.flex combinada com adaptação percentual
3. Componentes do pacote
Minha ideia é encapsular um componente vue e usar o atributo slot para envolver a página que precisa de adaptação visual no componente para obter o efeito de reutilização.
<template>
<div class="scaleBox" :style="styleObj">
<slot></slot>
</div>
</template>
<script>
export default {
name: "ScaleBox",
data(){
return{
scaleX:1,
scaleY:1,
}
},
computed:{
styleObj(){
return {
transform: `scale(${
this.scaleX}, ${
this.scaleY}) translate(-50%,-50%)`
//铺满但是会变形
//transform: `scale(${this.scale}) translate(-50%,0)`
//不变形会有留白
}
}
},
methods:{
getScale(){
const ww = window.innerWidth / 1920 //window.screen.width
const wh = window.innerHeight / 1080 //window.screen.height
this.scale = ww < wh ? ww: wh
this.scaleX = ww
this.scaleY = wh
},
resizeHanlder(){
this.getScale()
}
},
mounted() {
this.getScale()
window.addEventListener('resize', this.resizeHanlder);
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeHanlder)
}
};
</script>
<style lang="less" scoped>
.scaleBox{
width: 1920px; /* 设计稿宽度 */
height: 1080px; /* 设计稿高度 */
position: absolute;
top: 50%;
/* top:0; */
left: 50%;
transform: translate(-50%, -50%);
transform-origin: left top;
overflow: hidden;
}
</style>
A escala define dois valores, escalaX, escalaY. A largura e a altura são cobertas, mas serão deformadas. A
escala define um valor. A largura e a altura não são deformadas, mas serão deixadas em branco.
