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的计算函数去完成。非常方便