前端大屏尺寸实现自适应屏幕大小

说在前面

目前很多业主在使用系统的时候都会有大屏的需求，很多屏幕并不会像我们开发的屏幕一样标准，比如1920*1080，这样我们就需要根据业主的屏幕尺寸进行适配，避免一些图表或文字在大屏中出现偏移，影响视觉观感。

方案比选

方案一：

如果希望在大屏中实现最佳的展示效果，应该由设计人员针对大屏的尺寸进行单独设计，然后开发人员使用如下监听方式：

@media screen and (max-width: 2560px) {}
@media screen and (min-width: 2561px) {}
1
2

以2561px为分界线，在屏幕尺寸大于分界线时来让不同的样式代码生效。
这种方案可以保证最好的展示效果，完美适配大屏，问题就是如果屏幕发生变化，或者需要适配其他尺寸的屏幕时，需要针对性的进行调整。

方案二：

使用vw和vh属性来表示dom节点的长宽。
举个例子：我们手里的设计稿是1920*1080，此时使用vw和vh,这样就可以适配大屏。
比如某个dom节点宽度为200px,高度为100px,此时设置他的宽高为：

.dom {
    width: (200 / 1920) * 100vw;
    height: (100 / 1080) * 100vh;
}
1
2
3
4

原理也比较简单，对所有dom节点的宽高根据屏幕大小进行等比缩放，这样做的麻烦点是，代码中会有很多涉及到需要px单位的地方，每一处都需要写成这种形式，从操作上烦琐了不少。

方案三：

使用rem来实现响应式的布局，rem是相对于根元素的字体大小来计算的单位，配合引入相应的postcss相关插件，免去了设计稿中的px到rem的计算。
引入：postcss-plugin-px2rem,还有很多其他类似插件或者loader，引入一个即可。

.dom {
    width: 200px;
    height: 100px;
}
编译以后的代码为：
.dom {
	width: ..rem;
	height: ..rem;
}
1
2
3
4
5
6
7
8
9

这样做的优势就是可以安全按照设计稿给出的尺寸来完成css布局，不需要操心转换等问题。

使用过程中的一些小坑

一些echarts图表是独立设置尺寸的

echarts总的大小会根据容器的大小调整，但是字体，间距等需要在代码中设置大小。
由于postcss-plugin-px2rem只能检测到css文件中的样式，所以需要单独处理，方案也比较简单，选中宽或者高为参考，进行等比缩放即可。

getSize(size) { // 这里是以高度为参考进行等比缩放
    return size * (window.innerHeight / 1080);
},
...ehcart legend的设置片段
legend: {
    orient: "vertical",
    bottom: "10%",
    left: "center",
    itemGap: this.getSize(10),
    itemWidth: this.getSize(8),
    itemHeight: this.getSize(8),
    itemStyle: {
        radius: 5,
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

选择宽度或者高度作为最佳参考标准

rem的方案是需要选择宽度或者高度为参考的，如果大屏宽高较原稿变化不大可随意选择，如果变化偏大，需要分别设置宽和高为基准，比较哪种更适合屏幕的尺寸。

// rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientHeight/ 1080
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如上述代码，是以高度为参考基准的。

浏览器显示最小字体为12px

这里在适配小屏幕的时候会遇到问题，比如业主要求需要适配他们的平板，此时你可能会发现小屏幕下会有字体重叠的情况出现，这是因为浏览器支持的最小字体为12px,此时需要根据实际小屏幕尺寸调整一下页面的布局。

全局转换可能导致意想不到的问题

这种情况下，我们就只需要转换我们需要的代码，以文件夹为基准。实现方式不同插件有些许差异，下面举几个例子，实际情况请参考官方 https://www.npmjs.com/package/package。
如果你用的是 postcss-plugin-px2rem,可以像下面的例子中一样使用exclude属性。
但如果你使用的是postcss-px2rem,那不好意思，你是用不了这个属性的，但是如果你仔细查看，他是有可以使用属性的版本的。

rem实现分享

安装依赖并在配置文件中引入

npm i postcss-plugin-px2rem --save -dev

在vue.config.js中添加配置信息
module.exports = {
    //px转rem的配置（postcss-plugin-px2rem插件）
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式
                        mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    }),
                ]
            }
        }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

还有更多的配置项，详情参考官方 https://www.npmjs.com/package/postcss-plugin-px2rem。

新建rem.js文件

内容参考上方 选择宽度或者高度作为最佳参考标准 代码。

在main.js中引入

import './utils/rem';
加载以后会调用setRem()方法来触发尺寸的初始化。

说到最后

为了实现最佳的效果，以上几种方案甚至可以组合使用，希望大家读完文章后能理解并动手实践大屏适配。