已被阅读 4333 次 | 文章分类:VUE | 2021-03-03 23:11
前端项目中,适配各种屏幕分辨率是比较常见的需求;vue工程中如何适配1080p和2k屏幕呢;有下面两种方式
1 第一种场景:内联style标签内样式
比如常规是1080p的样式;需要适配2k(2560*1440)的屏幕可以如下实现:
/* 1080p分辨率 */
.class1{
height: 162px;
}
.class2{
height: 84px;
&-title{
height:70px
line-height:70px;
font-size: 26px;
}
}
}
/* 2k分辨率 */
@media screen and(min-width: 1921px) and (max-width:2560px) {
$width_2k:2560;
$height_2k:1440;
$width:1920;
$height:1080;
$unit:px;
@function calWidth_2k($pixel) {
@return $width_2k*$pixel/$width;
}
@function calHeight_2k($pixel) {
@return $height_2k*$pixel/$height;
}
@function calFont_2k($pixel) {
@return $height_2k*$pixel/$height;
}
.class1{
height: calHeight_2k(162px);
}
.class2{
height: calHeight_2k(84px)
&-title{
height:calHeight_2k(70px);
line-height:calHeight_2k(70px);
font-size: calFont_2k(26px);
}
}
}
2 第二中情况:vue ui组件内部样式
如果部分样式在标签内部,或者vue固有width或者height;可以如下实现
首先在main.js中定义获取当前屏幕像素值的全局变量;以及定义计算2560分辨率像素值的全局函数
Vue.prototype.$screenPixel = window.screen.width;
Vue.prototype.$cal2kScreenPixel = (value)=>{
return 2560*value/1920
};
然后可以在全局的组件使用了;
内部样式如下方式写
<div class="class1" :style='{"width":this.$screenPixel==2560}this.$cal2kScreenPixel(55)+"px":"55px"'>
</div>
vue的组件固有属性,如下方式写
<el-table-column
type="index"
label="序号"
:width='this.$screenPixel==2560?this.$cal2kScreenPixel(150):150'>
</el-table-column>
综上可以看出,只要定义好一套标准样式,不光是2k分辨率,其他的分辨率都可以通过less的计算函数去完成。非常方便
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号