Table of contents
1. Mobile terminal adaptation solution: combination of amfe-flexible and postcss-pxtorem plug-ins
amfe-flexible : Configure the scalable layout scheme, mainly setting 1rem to viewWidth/10. According to the device width, modify the size of the root element html to adapt to different terminals.
postcss-pxtorem : It is a plug-in for postcss, used to generate rem units from pixel units. It can automatically convert px to rem and handle some special situations.
Step 1: Install two plugins
npm i amfe-flexible --save-dev
npm i postcss-pxtorem --save-dev
Step 2: Import amfe-flexible in the main.js file
import 'amfe-flexible'
Step 3: Configure postcss-pxtorem in 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: ["*"]
})
]
}
}
}
},
});
Copy this block of code to your vue.config.js
You can also configure it in postcss.config.js. If not, create it in the project root directory.
module.exports = {
"plugins": {
'postcss-pxtorem': {
rootValue: 192,
propList: ['*']
}
}
}
// rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192
2. Visual large screen adaptation solution: focusing on the scale attribute of transform in css3
1. The basic requirements for large screen adaptation must meet the following three points:
1. No scroll bars can appear horizontally or vertically
. 2. It can be full screen (that is, F11 full screen mode)
. 3. No matter how big the screen is, the page cannot be deformed. It is best that no problem can be seen with the naked eye.
2.Solution
1. Adapt to the scale of css3. Principle: We assume that we use px units to write the page normally according to the 1920×1080 design drawing, and then when the page changes, use scale to dynamically enlarge or reduce 2.rem
adaptation, using amfe-flexible and postcss-pxtorem plug-ins to combine
3 .flex adaptation combined with percentage adaptation
3. Package components
My idea is to encapsulate a vue component and use the slot attribute to wrap the page that needs visual adaptation in the component to achieve the effect of reuse.
<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>
Scale sets two values, scaleX, scaleY. The width and height are covered but will be deformed.
Scale sets one value. The width and height are not deformed but will be left blank.
