说在前面
目前很多业主在使用系统的时候都会有大屏的需求,很多屏幕并不会像我们开发的屏幕一样标准,比如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()方法来触发尺寸的初始化。
说到最后
为了实现最佳的效果,以上几种方案甚至可以组合使用,希望大家读完文章后能理解并动手实践大屏适配。
标签:px2rem,适配,前端,rem,大屏,屏幕,postcss From: https://www.cnblogs.com/mounterLove/p/18066442