苏宁项目知识点总结（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大小。