我的需求是什么

我期望完成一个能适应不同分辨率的大屏，因为客户要求大屏能同时部署在一般pc端及加广大屏上。这个需求比较普遍，一般的大屏布局是根本没问题的，假如你没有用百分比或者vw/vh布局，直接用px也是能够的，高度自适应，宽度写死也能自动适应，因为大屏横向的留白许多。

总是会遇到新问题

然而，有些时候总会遇到一些特殊状况，比如分辨率改变后，有些vw/vh代表的值相应会改变，再杂揉transform: rotate一些效果，本来相连的折线或许就连不上了。所以，针对这种状况，你需要针对不同分辨率，做一些判别，乃至再加一些核算。

为什么用less

基于上面的需求和问题，我最后挑选了less完成了。挑选Less而不是sass就是感觉这个更简便，也不必管node版别，而且根本够用了。假如不知道less的，less中文官网能够先看看。

完成方案

其实我也尝试过用less.modifyVars去动态修改变量，但是终究并没有成功，因为引证less文件这一步就把我难住了，这是很古怪的地方。看过许多方案，都是在index.html页面静态引证，我尝试过，并没有成功，假如有哪个大佬完成了，欢迎在文章后边给出示例。接下来就给我们说下我的方案吧。

静态编译装备

直接在vuecli装备文件里引证less文件，这样我感觉是最简略的，官网的那种静态引证着实没看明白。你还能够在这儿界说你要用到的变量，它们会掩盖less文件中变量的初始值。

css: {
    loaderOptions: {
      less: {
        additionalData: `@import "~public/css/utils.less";`,
        lessOptions: {
          modifyVars: {
            designWidth: 2510,
            designHeight: 960,
          },
          javascriptEnabled: true,
        },
      },
    },
  },

前面说了，我其实是想用less.modifyVars这种高档手法来动态改变变量值的，怎么办我一开始就挑选了静态编译这个方案，这就意味着，变量值是无法改变的，你能够理解为less代码现已被编译过了，不会再编译第2次，所以动态修改无效。所以我想到了媒体查询。。

用媒体查询处理变量

媒体查询应该知道的都知道，用法很简略，上代码：

// 默认规划稿的宽度19202510
@designWidth: 1920;
// 默认规划稿的高度1080960
@designHeight: 1080;
.px2vw(@name, @px) {
  @media all and (max-width: 3700px) {
    @{name}: (@px / 3700) * 100vw;
  }
  @media all and (max-width: 2510px) {
    @{name}: (@px / @designWidth) * 100vw;
  }
  @media all and (max-width: 1920px){
    @{name}: (@px / 1920) * 100vw;
  }
}
.px2top(@px) {
  @media all and (max-width: 3700px) {
    top: ((@px - 12) / 960) * 100vh;
  }
  @media all and (max-width: 2510px) {
    top: ((@px - 15) / @designHeight) * 100vh;
  }
  @media all and (max-width: 1920px){
    top: (@px / 1080) * 100vh;
  }
}

我只摘取了部分示例代码，这儿用到less混合写法，混合写法还不清楚的能够到官网这儿多看下，我就不啰嗦了。它既有vue中混入的概念，又能像函数一样带参数，乃至还有函数核算，非常好用。

另外这个示例中要注意的是媒体查询的用法，我是把分辨率高的放上面，从大到小按顺序排列，这样保证各个分辨率对应的款式不会抵触。

正文用法

在代码中运用这些混合也比较简略，这儿给出示例：

.line1 {
        position: relative;
        .px2vw(width,2);
        .px2line(258);
        .px2top(250);
        .px2vw(left, -4);
        transform: rotate(-90deg);
        background: #fffd77;
      }

根本上，你现已能够把混入理解成自界说函数了，用起来仍是挺爽的，试一下吧。本来想用less.modifyVars完成动态切换款式的，成果整了一个这套凑集的方案，管他呢，能抓老鼠就是好猫！

接榜领题

如何用less.modifyVars完成动态切换款式，期望有大佬给出明示，网上案例我根本试了一遍，没成功的。在此感谢！

参考资料：

less简介及其编译原理

www.cnblogs.com/EricZLin/p/…

less用法

blog.csdn.net/zemprogram/…

blog.csdn.net/weixin_5270…

媒体查询

blog.csdn.net/weixin_4384…

www.cnblogs.com/zhaodifont/…

将@media 查询作为与 LESS 的混合

www.coder.work/article/113…