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

说在前面

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

方案比选

方案一:

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

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

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

方案二:

使用vw和vh属性来表示dom节点的长宽。
举个例子:我们手里的设计稿是1920*1080,此时使用vwvh,这样就可以适配大屏。
比如某个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()方法来触发尺寸的初始化。

说到最后

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

posted @ 2024-03-12 09:36  mounter爱学习  阅读(175)  评论(0编辑  收藏  举报