The size of the screen adaptation

方案一：lib-flexible

移动端适配：

一般而言,lib-flexible 并不独立出现,而是搭配 px2rem-loader 一起做适配方案,目的是 自动将 CSS 中的 px 转换成 rem.以下为它在 vue 中的使用

1、安装

npm install lib-flexible --save-dev

2、在 main.js 中引入 lib-flexible

// px2rem 自适应
import 'lib-flexible'

3、安装 px2rem-loader

npm install px2rem-loader --save-dev

4、配置 px2rem-loade

vue-cli 2.x版本

4.1、在 build/utils.js 中,找到 exports.cssLoaders,作出如下修改:

const px2remLoader = {
    
    loader: 'px2rem-loader',
    options: {
    
    	remUint: 75 // 以设计稿 750 为例, 750 / 10 = 75
    }
}

4.2、找到 generateLoaders 中的 loaders 配置,作出如下:

// 注 释 掉 这 一 行 
// const loaders = options.usePostCSS ? [cssLoader,postcssLoader] : [cssLoader]
// 修改为 
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
    
	loaders.push(postcssLoader)
}

vue-cli 3.x版本

在项目根目录新建文件 vue.config.js,然后如下配置:

module.exports = {
     
    css: {
    
        loaderOptions: {
     css: {
    },
        postcss: {
    
                plugins: [ 
                	require('postcss-px2rem')({
    
                		// 以设计稿 750 为例, 750 / 10 = 75
                		remUnit: 75
                	}),
                ]
            }
        }
    },
};

重新 npm run dev,完

大屏适配

​ If we do the screen size to do 3840 x 2160 为设计稿的适配,那么我们的 remUnit 的值则 改为 384.At this point, the source code needs to be modified！

1、找到源码

打开./node_modules/lib-flexible/flexible.js,找到如下片段源码：

function refreshRem(){
     
	var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
     
    	width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

**解决：**当屏幕宽度除以 dpr（dpr 是一个倍数,此处一般为 1） 大于 540 这个特定值的时候,Then there is no longer an issue of adaptation

2、修改源码

If the large screen size I want to adapt is based on 3840 的设计稿, 而要求最小范围是 1980,最大为 5760,那么我们要修改的则变为

function refreshRem(){
     
	var width = docEl.getBoundingClientRect().width;
	if (width / dpr < 1980) {
     
		width = 1980 * dpr;
    } else if (width / dpr > 5760) {
     
    	width = 5760 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

**注：**修改完成后,重启项目,则会适配到相应的尺寸.此外还有一个提示,当脱离掉 node_modules 重新 npm install 项目依赖时还是需要重新修改一遍的！

方案二：监听浏览器的窗口大小

1、初始化的时候获得大屏幕的比例

2、把这个比例设置给CSS的scale变量

3、监听浏览器的窗口大小,将新的比例赋给scale变量

<div class="ScaleBox" ref="ScaleBox" >
    
mounted() {
    this.setScale(); 
    window.addEventListener("resize", this.setScale);
},
methods: {
    getScale() { 
    	const { width, height } = this;
        let ww = window.innerWidth / width;
        let wh = window.innerHeight / height;
        return ww < wh ? ww : wh;
    },
    setScale() {
        this.scale = this.getScale();
        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
    },
}

#ScaleBox { 
  --scale: 1;
}
.ScaleBox {
	transform: scale(var(--scale)) ;
}

VUE Components are packaged

<template>
    <div class="wrap">
        <div class="ScaleBox" ref="ScaleBox" :style="{width, height}">
        	<BigScreen></BigScreen>
        </div>
    </div>
</template>
<script>
export default { 
    name: "ScaleBox",
    props: { 
       width: {
           type: Number,
           default: 1920
       },
       height: {
           type: Number,
           default: 1080
       }
    },
    data() {
        return {
            scale: null
        };
    },
    mounted() {
        this.setScale(); 								    window.addEventListener("resize", this.setScale);
    }, 
    methods: {
        // Get a smaller scale of an edge, In this way, an edge with a larger ratio can be scaled according to the predetermined ratio, width 和 height is the default scale set,window.innerWidth 和window.innerHeight is the scaled size of the large screen.
        getScale() { 
            const { width, height } = this;
            let ww = window.innerWidth / width;
            let wh = window.innerHeight / height;
            return ww < wh ? ww : wh;
        },
        setScale() {
            this.scale = this.getScale();
            this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
        },
        debounce(fn, delay) {
            let delays = delay || 500;
            let timer;
            return function() {
                let th = this;
                let args = arguments;
                if (timer) { clearTimeout(timer);
            }
            timer = setTimeout(function() {
                timer = null;
                fn.apply(th, args);
            }, delays);
        };
    }
 }
};
</script>
<style >
#ScaleBox { 
	--scale: 1;
}
.wrap {
    background: #eee; width: 100%;
    height: 5000px;
}
.ScaleBox {
    transform: scale(var(--scale)) translate(-50%, -50%);
    display: flex;
    height: 100%;
    flex-direction: column;
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    z-index: 999;
}
</style>