大小屏适配

方案一：lib-flexible

移动端适配：

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

1、安装

npm install lib-flexible --save-dev
1

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

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

3、安装 px2rem-loader

npm install px2rem-loader --save-dev
1

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
    }
}
1
2
3
4
5
6

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

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

vue-cli 3.x版本

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

module.exports = { 
    css: {
        loaderOptions: { css: {},
        postcss: {
                plugins: [ 
                	require('postcss-px2rem')({
                		// 以设计稿 750 为例， 750 / 10 = 75
                		remUnit: 75
                	}),
                ]
            }
        }
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

重新 npm run dev，完

大屏适配

​ 假如我们屏幕尺寸要做以 3840 x 2160 为设计稿的适配，那么我们的 remUnit 的值则 改为 384。此时就需要修改源码啦！

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;
}
1
2
3
4
5
6
7
8
9

**解决：**当屏幕宽度除以 dpr（dpr 是一个倍数，此处一般为 1） 大于 540 这个特定值的时候，那么就不再进行适配了问题

2、修改源码

假如我要适配的大屏幕尺寸是基于 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;
}
1
2
3
4
5
6
7
8
9
10
11

**注：**修改完成后，重启项目，则会适配到相应的尺寸。此外还有一个提示，当脱离掉 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)) ;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

VUE 组件就封装

<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: {
        // 获取较小比例的一条边, 这样较大比例的一条边就可以按照既定的比例缩放了, width 和 height 是设置的默认比例,window.innerWidth 和window.innerHeight 是大屏幕的缩放尺寸.
        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78