苏宁项目知识点总结（less+rem）
rem如何计算？
如果 html { font-size: 16px } 则 1rem = 1 * 16px（html默认字体大小）= 16px
即：设备字体大小/设计稿字体大小 = 设备尺寸大小/设计稿尺寸大小
1，less语法注意事项
- less声明变量使用@作为前缀，声明函数使用‘.’作为前缀。
- 在要被引入html文件中的less文件或要直接转换为css文件的less文件中，应该在第一行声明编码方式，防止编译时乱码： @charset “UTF-8”; 。
- less中使用计算时，算数符号的前后都应该有空格。
2，less实现遍历
- less没有循环语法，可以使用函数的迭代实现循环，为了避免死循环可以给函数的执行附加条件（根据数组的长度去停止当前循环），需要通过序号来判断 ，通过序号反向遍历 @index 的值从数组的长度开始到0停止，或者正向遍历@index 从0开始到数组的长度停止。
（ @index 是从1开始取值的）
.adapterMixin(@index) when ( @index > 0){
@media (min-width: extract(@adapterDeviceList,@index)){
html{
font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
}
}
.adapterMixin( @index - 1);
}
其中 extract(@adapterDeviceList,@index) 表示从列表 @adapterDeviceList 中获取第 @index 个数值。
3，rem大小的计算公式
页面元素的rem大小的计算公式：页面元素的 px值 / html的字体大小（预设的设计稿尺寸下的@baseFontSize）
例如要一个div的高度在750px的设计稿中的高度为90px，则可以按如下设置：
div{ height: 90rem / @baseFontSize; }
4，主流移动媒体的尺寸
目前的主流移动媒体的尺寸主要有以下几种：
750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;（按大小顺序书写便于遍历）
在遍历生成对应的html元素的字体大小时，应该小尺寸设置在前，大尺寸设置在后。
5，zepto.js插件
zepto.js插件，语法和 jQuery 基本相同，但比jQuery更加轻量级，该插件中的touch.js模块内置了滑动手势事件：
[‘swipe’, ‘swipeLeft’, ‘swipeRight’, ‘swipeUp’, ‘swipeDown’,‘doubleTap’, ‘tap’, ‘singleTap’, ‘longTap’]
6，链式编程断链后想要找回原始的对象，使用end()方法进行补链能够使this值重新指向最初的this对象。而使用andSelf()能够
使this值同时指向最初的this对象和当前的this对象。例如：
$(“ul”).find(“li”).css(color,“red”); ===> 将li中的字体设置为红色
$(“ul”).find(“li”).end().css(color,“red”); ===> 将ul中的字体设置为红色
$(“ul”).find(“li”).andSelf().css(color,“red”); ===> 将ul和li中的字体都设置为红色
7，swiper插件（目前资料中存的是 3.x版本，查手册时注意区分版本）
swiper插件可以应用封装好的多种轮播图样式。
8，在浏览器端使用less
- less无法在浏览器端直接使用
- 浏览器不识别，必须解析成css代码
- 通过less.js解析插件（javascript）
- 引入less文件需要加上 type=“text/less”
- less.watch(); 无刷新预览样式
- 以http形式打开网页预览
9，适配基准值换算
适配的时候设置基准值 320px 50px 怎么算：（640px的html字体为100px的话 ===320px的html字体应该为50px）
- 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度
- 怎么去设置不同尺寸设备的html字体参照值 （ 1、js换算； 2、媒体查询 (推荐) ）
10，移动端布局
- 伸缩布局 flex
- 流式布局 百分比
- 响应布局 媒体查询 （超小屏设备的时候：流式布局）
- 共同点：元素只能做宽度的适配（排除图片）
- 适配方案rem：宽度和高度都能做到适配（等比缩放，像图片一样）
11，rem适配方案中的特殊情况
rem适配方案中一般 ‘大容器’ 或 ‘某些等分父容器宽度的小容器’ 的 宽度还是会按照百分比进行流式布局，然后一些小容器的宽度和大部分容器的高度 都使用rem单位进行布局。
12，上面的适配方案是 less + rem + 媒体查询 的适配方案。 另一种适配方案是 rem + flexible.js 的适配方案。
- flexible.js 是手机淘宝团队出的简洁高效移动端适配库，我们再也不需要写不同屏幕的媒体查询了，因为flexible.js做了处理，它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。（“屏幕大小/html字体大小” 比例都是10）。我们只需要确定好我们当前设备的html文字大小就可以了，比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px（750px/10），就可以设置页面元素rem值：页面元素的px值/75 。
- github地址：https://github.com/amfe/lib-flexible
13，cssrem 插件
为了解决 rem + flexible.js 适配方案中，设置页面元素rem值时都要用设计稿中的px尺寸/75的计算，VSCode 中有一款 cssrem 插件，在设置中修改默认的html字体大小为75px(对应750px的设计稿)，然后在css中直接写设计稿中实际的px大小时，该插件能够帮助将其自动转换为对应的rem大小。