多端适配熟悉前端开发的一定会遇到这个问题，屏幕适配！有些项目需要同时适配PC端、平板端和移动端，那么我们是应该写几套不同的样式，还是只写一套呢？哪个最好？其实没有最好的，还是要根据项目的需要来定。一般来说，我建议只写一套代码，因为这样可以降低开发成本和维护难度。那么就有一个问题，一套代码如何适配不同的设备呢？尺寸应使用什么单位？像素？嗯？雷姆？我想大部分人的实现无外乎那些解决方案：在页面初始化的时候进行判断，缺点是无法响应大小的变化，需要手动刷新页面，可以写一个resize的监听事件。当然，在极少数情况下，设备屏幕尺寸会发生变化.isPc){//如果是PC}if(clientWidth>0){docEl.style.fontSize=(clientWidth/design)*100+"px";}},false);用@media判断，可以响应尺寸变化，缺点是@media数量多，可读性差，维护起来很麻烦，感觉还是写几套不同风格的@mediascreenand(max-width:375px){...}@mediascreenand(max-width:576px){...}@mediascreenand(max-width:768px){...}安装各种第三方插件，即，配置项很多。大部分人选择npminstalllib-flexiblenpminstallpx2rem-loader..以上几种方案可以解决屏幕适配问题。使用上没有问题，但是都是基于rem布局的方案。移动端效果最好，但PC端显然不适合使用rem，有没有办法在PC端和手机端切换时自动转换px和rem单位？LessFunctions参考文档可以在没有javascript的情况下完成吗？直接在less中实现自动切换？为了达到这个目的，我吃不好，睡不好。尝试了各种方法，最终通过less的各种功能秘籍实现了。我用的less版本是3.0，最新版本好像是4.0以上。高版本有一些新的函数，比如if，each等，可以让编码更方便，但是既然可以用低版本实现，那么兼容性肯定会更强。实现方式主要是遍历value。length和extract函数可以将空格识别为数组对象，遍历查找数值，通过@media查询自动切换大小单位。原理不难，用javascript分分钟就能实现，但是less有点蛋疼，因为作用域问题，@media查询里面的函数不能被外部调用，一开始还是有难度./*根据不同的设备适配属性单元*/.mixin-property-rules(@property,@value,@device){@n:length(@value);.each(@i,@parent:"")当(@i<@n+1){@arg:extract(@value,@i);/*屏幕大于或等于768px的设备*/.ifNumber()when(isnumber(@arg)=true)and(@device=001){@child:unit(@arg,px);}/*屏幕小于768px的设备*/.ifNumber()when(isnumber(@arg)=true)and(@device=002){@child:unit(@arg*2/100,rem);}/*非数字属性*/.ifNumber()when(isnumber(@arg)=false){@child:@arg;}.ifNumber();@newValue:~"@{parent}@{child}";.ifLast()当(@i=@n){@{property}:@newValue;}.ifLast();.each(@i+1,@newValue);}.each(1);}.mixin-property(@property,@value){/*屏幕大于768px的设备*/@mediascreenand(min-width:768px){.mixin-property-rules(@属性，@value，001）；}/*小于768px的屏幕设置准备*/@mediascreenand(max-width:768px){.mixin-property-rules(@property,@value,002);}}html{字体大小：14px；/*屏幕小于768px的设备*/@mediascreenand(max-width:768px){font-size:~"calc(100vw/1536*100)";}/*屏幕小于576px的设备*/@mediascreenand(max-width:576px){font-size:~"calc(100vw/750*100)";}}函数调用.example{.mixin-property(padding,10201530);.mixin-property(边框,1solid#000);.mixin-property(font-size,16);}//输出屏幕宽度>=768.example{padding:10px20px15px30px;边框：1px实心#000；font-size:16px;}//输出屏幕宽度<768.example{padding:.2rem.4rem.3rem.6rem;边框：.02rem实心#000；font-size:.32rem;}这个函数的好处是不用写单位，只写size值，方法会自动按照设备单位返回！以后如果要更改尺寸或单位，只需修改函数中的计算逻辑即可，一劳永逸！缺点是每次调用的函数都会在css中输出@media查询语句。提示：@media函数中的查询和数值计算逻辑一定要根据自己的需要来写。以上只是我写的一个例子(·`ω′?)如果喜欢，会有更多原创技术文章分享！
