我的需求是什么
我期望完成一个能适应不同分辨率的大屏，因为客户要求大屏能同时部署在一般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简介及其编译原理
less用法
媒体查询
将@media 查询作为与 LESS 的混合
