一、背景
对前端不甚了解，对分辨率适配一窍不通，奈何不得不用。文章中的分辨率适配原理我可能说不太明白，但会写出清晰可行的操作步骤。
二、核心代码
分辨率适配
用到了rem、vw(视窗宽度）、clamp函数。
$maxWidth:3840;
$minWidth:1920;
@function toRem($px) {
@return clamp(
($px/ 16px) * 1rem,
($px/ ($minWidth * 1px)) * 100 * 1vw,
(($px/ ($minWidth * 1px)) * $maxWidth) / 16 * 1rem
);
}
maxWidth是适配的最大宽度，minWidth是适配的最小宽度。这里代表可以适配宽度在1920-3840px的分辨率，也就是1-4k。
如果没有设置html的ffont-size，浏览器默认1rem = 16px。
关于clamp函数：
clamp(MIN, VAL, MAX)
三个参数分别是最小值、首选值、最大值；它代表一个取值区间。
首先按中间的首选值计算，如果首选值小于最小值，则取最小值；如果首选值大于最大值，则取最大值；如果介于两者之间，则取首选值。
首选值的计算用到了vw,视窗宽度 * 1% = 1vw，比如窗口的高度是1920px，那么1vw就是192px.
这里计算首选值，先用传入的px除以1920，得到目标长度相对于1920的百分比，再乘以100计算出视窗高度vw。
例如适配2k分辨率，2560x1440.
传入100px,计算出100px/1920px = 0.052 ，相当于在1920px的分辨率中，它占比0.052，而1920*1% = 1vw，所以它是5.2vw.
在2k分辨率（2560宽度）的屏幕中，5.2vw = 2560 * 1% * 5.2 = 128px.
同样的，最大值也是这么计算出来的，只不过代入了具体的值——最大宽度3840，同时把px换成了rem。
echarts 适配
relPx(value) {
// 容器的宽度
const containerWidth = this.$refs.mychart.getBoundingClientRect().width
// 1920 * 1080分辨率下，设计稿的宽度
const containerWidthAt1920 = 300
// 容器相对1920的占比
const scale = containerWidth / containerWidthAt1920
// 用这个比例计算出适配当前容器大小的尺寸
return value * scale
},
使用方法
1.引入scss和node--sass
npm install --save-dev sass-loader
npm install --save-dev node-sass
如果报错，请注意版本问题。
2.在/src/assets目录下新建common.scss,文件内容如下
$maxWidth:3840;
$minWidth:1920;
@function toRem($px) {
@return clamp(
($px/ 16px) * 1rem,
($px/ ($minWidth * 1px)) * 100 * 1vw,
(($px/ ($minWidth * 1px)) * $maxWidth) / 16 * 1rem
);
}
3.在vue页面的style中引入common.scss
<style scoped lang="scss">
@import '../assets/common.scss';
.div3 {
background-color: cadetblue;
width: toRem(500px);
height: toRem(600px);
line-height: toRem(600px);
margin-top: toRem(-50px);
}
.div4 {
background-color: coral;
width: toRem(500px);
height: toRem(300px);
line-height: toRem(500px);
}
</style>
就可以正常使用了
echarts的适配
这个方法直接写在methods里面：
relPx(value) {
// 容器的宽度
const containerWidth = this.$refs.mychart.getBoundingClientRect().width
// 1920 * 1080分辨率下，设计稿的宽度
const containerWidthAt1920 = 300
// 容器相对1920的占比
const scale = containerWidth / containerWidthAt1920
// 用这个比例计算出适配当前容器大小的尺寸
return value * scale
然后直接在options中使用就可以了。
