开发者学堂课程【移动 Web 前端开发：less-adapter 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8494
less-adapter
内容介绍
一、less 适配推导
二、less 适配自调用
三、最终整理
一、less 适配推导
进入adapter,发现 CSS 语法在 less 当中也可以用，那么如何去适配设备？
在 suning 的 demo 中有 rem 的适配方案，从中向 adapter 中拷入适配方案如下:
@media （min-width：640px）{
html{
front-size：100px；
}
}
浏览器中刷新屏幕在 style 中可查看到代码添加代码。
现在只适配了一种设备，目的是适配主流设备，需要了解主流设备有那些，屏幕尺寸多大。
打开苏宁官方网站，得到设计稿种类有 640px 和 750px，那么如果现在你是开发助理，设计稿是 750px，要把750px 的设计稿还原成，页面，这个页面的话，文字是有大小的，750 的设计稿肯定能通过psd拿到字体大小，假设字体大小为 24，那在做页面的时候，要把 24 换算为 px，或 rem，所以换算时需要有基准，750 的时候可以假设基准值为 100px，而且这个基准值是可以变化的，如果是 100px，那rem 则为 0.24，如果是 50px,那 rem 则为 0.48，所以说如何进行换算与基准值有关。所以设计稿需要设置对应的基准值。
假设是750 px 的设计稿，基准值为100 px，而不假设基准值为 12px，是100px 更好换算，是因为这里使用了 less，排除没有使用 less 的话换算起来非常困难，对比25/100和25/12是25/100 更好换算，所以选择100 px 更好。
如何设置里面内容，在 psd 图量取的尺寸以 px 为单位，那就通过把PSD基准值转为 rem，目的是把页面上所有 px 单位变为 rem。同样如果是640px的设计稿,也要设计一些基准值，如果设计成100，也要除以100就是 rem。
现在设计稿是750 px，但是设备的尺寸肯定与750 px不一样，设备尺寸有很多，常见的有 320px，375px，414px。就像苏宁主页设备，适配了很多终端设备，在html 中可以看到，尺寸为750px 时字体大小为 24px，为540px 的时候字体大小是36px，480px时是32px等这些都是主流设备的宽度，也可以从预览的时候看到，
如图:
举例当切换到S4屏幕为360×640，如图：
像主流设备尺寸 320px, 360px, 375px, 384px, 400px, 414px, 424px, 480px, 540px, 640px ，720px, 750px，而这些主流设备度，都需要去进行适配的。
比如想适配以上12种的设备,设计稿为 750px，是可以适配的，如果设计稿是 640px 则 720px，750px 是无法适配的。
每一种设备都有对应的 fontsize 大小，当设备为750 px 尺寸大小时，fontsize 为100px，当设备为720px 时，fontsize 应该为720/750*100px，代码如下：
@media （min-width：640px）{
html{
front-size：100px；
}
}
@media （min-width：720px）{
html{
front-size：720/750*100px；
}
}
此时刷新网页页面可看到自动换算好。
所以需要适配多少种主流设备就多少种适配方案就好了，但是连续写十几种肯定是不行的，所以这只是一个方案，可以把方案优化下，这里设置设计稿宽度为 @psdWidth:750，基准值 @baseSize:100为 100，替换设备 320px 的 font-size 代码如下：
@psdWidth:750；
@baseSize:100；
@media （min-width：320px）{
html{
front-size：320px/@psdWidth*@baseSize；
}
}
代码中 px 有一个就好了，此时刷新浏览器页面在 style 中可查看到320px 的 front-size 被成功替换掉如下：
html{
front-size：42.66666667px；
}
更改设计稿宽度为 @psdWidth:640 后刷新页面可查看到：
…
html{
front-size：50px；
}
…
所以通过这样 adapter 的变量使得网页很好维护，只需要更改变量设计稿宽度，基准值网页会自动换算。
但是这样还是不够好，还是要写很多语句，发现也可以把 min-width 当中变量，所以需要把整体 @media 封装起来，将 @media 封装到 .adapterFuc() 中，下次要使用时直接调用就好了，代码如下：
…
//adapter mixin
.adapterFuc(){
@media （min-width：320px）{
html{
front-size：320px/@psdWidth*@baseSize；
}}}
.adapterFuc();
刷新浏览器页面运行结果如下：
…
html{
front-size：42.66666667px；
}
…
但是此时 320px 是静态的需要转化成动态的，所以需要传参，定义参数@deviceWidth，这里没有传参所以要定义为默认的，比如默认为 750px，如下代码：
…
//adapter mixin
.adapterFuc(@deviceWidth：750px){
@media （min-width：@deviceWidth）{
html{
front-size：320px/@psdWidth*@baseSize；
}}}
.adapterFuc();
刷新浏览器页面运行结果如下：
…
html{
front-size：100px；
}
…
如果想传入320 设备只需要加入 320px，增加语句如.
adapterFuc(320px)，此时每增加一个设备就调用. adapterFuc()，但还是能继续优化，可以把需要增加设备看成一个数组，定义设备宽度数组为 @devicewidthList，将需要适配设备以逗号分隔，
如：
@devicewidthList : 320px, 360px, 375px, 384px , 400px , 414px, 424px , 450px , 480px , 540px , 640px , 720px , 750px ;
二、less 适配自调用
当有了这些设备后是可以便利的，但是 less 没有分支循环语句，但是可以自调用，跟轮播图的 setTimeout 自己调用自己差不多，所以现在要通过数值来进行适配，适配前首先要能便利他。
具体便利同样定义 adapterFuc()，传入索引 @index，如果当前索引是1就可以去数值里面索引取1，取2，取3，适配方案同上一样，@devicewidth 是未知的需要@index 去取值，这里需要引入 length(@devicewidthList) 获取数组的长度，去取值需要用到 less 当中的函数 extract，作用是获取函数中的第几个值，如：
//length(@devicewidthList) 获取数组的长度
//extract(@devicewidthList,1) 获取数组序号为几的值
body{
height: extract(@devicewidthList,1);
}
刷新浏览器页面运行结果如下：
…
body{
height：320px；
}
…
通过以上举例可知 @index 就是第几个值，数组序号，确定好适配方案后就开始调用，调用要默认传1，不传1会报错，因为这里是没有默认值的，所以函数调用代码如下：
…
.adapterFuc(@index){
@media （min-width：extract(@devicewidthList, @index）{
html{
front-size：extract(@devicewidthList, @index）/@psdWidth*@baseSize；
}}}
.adapterFuc(1);
.adapterFuc(2);
适配1，2 的数值浏览器刷新结果如下：
…
@media（min-width:320px）{
html{
front-size：42.66666667px；
}}
@media（min-width:360px）{
html{
front-size：48px；
}}
…
@index 就是1，所以当上一段代码生成后还可以进行自己调用自己，就是当生成完数值为1的代码后 @index 自己加1，再生成数值为 2 的代码，再自加1生成，如此一直下去就会变成死循环，但是函数可以有另一种写法，是可以要条件的推断写法，
when 当 @index 序号小于等于数组长度的时候可以让他一直便利，大于数组长度时则不行，与 if 一样 when 相当于一个条件，只要调用一次 .adapterFuc()，则自动生成所有适配方案，所以适配代码为：
…
. adapterFuc(@index) when (@index <= length(@devicewidthList)){
@media (min-width: extract (@devicewidthList ,@index)) {
html{
font-size: extract(@deviceWidthList ,@index)/@psdWidth*@baseSize;
}}
//自调用死循环
. adapterFuc(@index+1);
}
.adapterFuc(1);
运行结果如下：
…
@media（min-width:320px）{
html{
front-size：42.66666667px；
}}
@media（min-width:360px）{
html{
front-size：48px；
}}
@media（min-width:375px）{
html{
front-size：50px；
}}
@media（min-width:384px）{
html{
front-size：51.2px；
}}
…
所以自调用便利成功需要适配的所有设备，最后维护主流设备更改只需要在@devicewidthList 更改。
三、最终整理
整理后 variables.less 代码如下：
@charset "utf-8";
//设计稿宽度
@psdWidth:750;
//基准值
@baseSize:100;
//需要适配的所有设备，设备的尺寸
@devicewidthList : 320px, 360px, 375px, 384px , 400px , 414px, 424px , 450px , 480px , 540px , 640px , 720px , 750px ;
mixins.less 代码如下：
@charset "utf-8";
. adapterFuc(@index) when (@index <= length(@devicewidthList)){
@media (min-width: extract (@devicewidthList ,@index)) {
html{
font-size: extract(@deviceWidthList ,@index)/@psdWidth*@baseSize;
}}
//自调用死循环
. adapterFuc(@index+1);
}
adapter.less 代码如下：
@charset "utf-8";
.adapterFuc(1);
model.less 中写入模块：
@charset "utf-8";
body{
background:red;
color:#fff;
font-size:1rem;
}
此时可以在 index.html 中写入内容观察，如：
<!DOCTYPE html>
<html>
…
<body>
A
</body>
</html>
最后测试一下，在浏览器刷新，运行如下：
随着缩小窗口，当窗口小于750px 时字体开始变化，如下：
