Less中函数的高级应用，PC、Web移动端适配的良药偏方

多端适配

熟悉前端开发的一定会遇到这个问题，屏幕适配！有的项目要求同时适配PC、平板和移动端，那我们应该是写几套不同的样式，还是只写一套呢？哪一种才是最好的？

其实没有哪一种最好的，还是得根据项目的需求来定，一般情况下我是推荐只写一套代码，因为这样可以降低开发成本和维护难度。那么就有个问题，一套代码如何去适配不同设备？尺寸该用什么单位？px？em？rem？

我想大部分人的实现无非就那几种方案：

在页面初始化的时候做判断，缺点是不能响应尺寸的变化，页面需要手动刷新，可以写一个 resize 监听事件，当然极少情况下设备屏幕尺寸会发生改变

document.addEventListener("DOMContentLoaded", () => {
    const design = 750;
    const docEl = document.documentElement;
    let clientWidth = docEl.clientWidth;

    if (utils.clientAgent.isPc) {
        // 如果是PC端
    }

    if (clientWidth > 0) {
        docEl.style.fontSize = (clientWidth / design) * 100 + "px";
    }
}, false);

使用 @media 判断，可以做到尺寸变化的响应，缺点是大量的 @media，可读性较差，维护起来非常麻烦，感觉还不如写几套不同的样式

@media screen and (max-width: 375px) {
    ...
}

@media screen and (max-width: 576px) {
    ...
}

@media screen and (max-width: 768px) {
    ...
}

安装各种第三方插件，就是配置项比较多，大多数人选择的方案

npm install lib-flexible
npm install px2rem-loader
...

以上的几种方案都可以解决屏幕自适应的问题，使用上没什么问题，只不过都是基于 rem 布局方案，对移动端来说效果是最好的，但是在PC端用 rem 显然不太合适，那有没有办法在PC和移动端切换的时候自动转换 px 和 rem 单位呢？

Less Functions

参考文档
能否不用 javascript？直接在 less 中实现自动切换？为了实现这个目的，饭吃不好，觉也睡不好，尝试了各种各样的方法，通过 less 各种函数偏方最终实现了。

我用的 less 版本是 3.0，查看最新的版本好像是 4.0 以上了，高版本中多了一些新函数，例如 if、each 等，能更方便的编码，不过既然能用低版本实现，那兼容性肯定会更强。

实现方法主要是对 value 进行遍历，length、extract 函数能够识别空格当成数组对象，遍历找出数字型的值，通过 @media 查询自动切换尺寸单位。

原理不难，用 javascript 分分钟就实现了，但是在 less 中就有点蛋疼了，因为作用域的问题，@media 查询中的函数无法被外部调用，一开始还是被难住了。

/* 根据不同设备适配属性单位 */
.mixin-property-rules(@property, @value, @screenWidth) {
    @n: length(@value);

    .each(@i, @parent: "") when (@i < @n + 1) {
        @arg: extract(@value, @i);

        /* 屏幕大于或等于768px的设备 */
        .ifNumber() when (isnumber(@arg) = true) and (@screenWidth >= 768) {
            @child: unit(@arg, px);
        }
        /* 屏幕小于768px的设备 */
        .ifNumber() when (isnumber(@arg) = true) and (@screenWidth < 768) {
            @child: unit(@arg * 2 / 100, rem);
        }
        /* 非数值属性 */
        .ifNumber() when (isnumber(@arg) = false) {
            @child: @arg;
        }

        .ifNumber();
        @newValue: ~"@{parent} @{child}";

        .ifLast() when (@i = @n) {
            @{property}: @newValue;
        }

        .ifLast();
        .each(@i + 1, @newValue);
    }

    .each(1);
}

.mixin-property(@property, @value) {
    /* 屏幕大于768px的设备 */
    @media screen and (min-width: 768px) {
        .mixin-property-rules(@property, @value, 768);
    }
    /* 屏幕小于768px的设备 */
    @media screen and (max-width: 768px) {
        .mixin-property-rules(@property, @value, 767);
    }
}

html {
    font-size: 14px;
    /* 屏幕小于768px的设备 */
    @media screen and (max-width: 768px) {
        font-size: ~"calc(100vw / 1536 * 100)";
    }
    /* 屏幕小于576px的设备 */
    @media screen and (max-width: 576px) {
        font-size: ~"calc(100vw / 750 * 100)";
    }
}

函数调用

.example {
    .mixin-property(padding, 10 20 15 30);
    .mixin-property(border, 1 solid #000);
    .mixin-property(font-size, 16);
}

// 输出 screenWidth >= 768
.example {
    padding: 10px 20px 15px 30px;
    border: 1px solid #000;
    font-size: 16px;
}

// 输出 screenWidth < 768
.example {
    padding: .2rem .4rem .3rem .6rem;
    border: .02rem solid #000;
    font-size: .32rem;
}

该函数的优点是你无须写单位，只写大小数值，方法会根据设备自动返回单位！如果以后想更改尺寸大小或单位，只需修改函数中的计算逻辑即可，一劳永逸！要说缺点的话就是每个调用的函数在 css 中都会输出 @media 查询语句。

提示：函数中的 @media 查询和数值计算逻辑都是要根据自己需求编写的，上面只是我写的例子而已

(・`ω´･) 点赞会有更多原创技术文章分享！