一  css弊端 css是非程序式语言，没有变量、函数、作用域；代码间看起来没有逻辑，冗余度高；没有好的计算能力；不方便扩展和复用； 二  less简介 是一门css的扩展语言，称为css 的预处理器

• 并没有减少css的功能，是在现有的css语法上加入程序式语言的特性，即扩展了css的动态特性
• 引入了变量、运算、函数等功能

三 less使用 1.变量的定义与使用 变量命名规范： eg； @color:deeppink;        //定义粉色的变量 body{        //使用     background-color:@color; }

• 只要在上面更改变量，所有的引用都可以变了

2.less的编译 要编译成css文件才能使用 vs code 中的easy  less插件 3.less的嵌套 （1）嵌套 less中这样写：子元素直接写在父元素里 编译出的css是这样的： （2）伪类 嵌套的时候默认为子代选择器，如果不想表示子类，想表示伪类、交集、伪元素选择器，则内层选择器前加上&符号 4.less的运算 在less中数字、颜色、变量都可以运算 语法：直接用+ - * / 符号

•  运算符左右要有空格隔开   1px + 5
• 两个不同单位的运算，取前一个值的单位。只有一个数有单位就取这个单位。
• 颜色之间有数字也可以运算，eg：#666-#222=#444

四 rem适配方案 场景：等比例适配当前设备；使用媒体查询来等比缩放适配 1.rem开发适配方案一 设计稿中iphone678一般750px宽

• 要把屏幕竖着分成15等分（也可以是20份、10份），把每一份750/15=50px作为html字体大小
• 在320px的设备上时，字体大小为320/15=21.33px

设置不同屏幕下的html文字大小： 然后设置元素的比例宽高是多少rem就好了。rem表示html字体大小的倍数 2.rem开发适配方案二flexible.js+rem 是方案一的优化 优势：不用写不同屏幕的媒体查询了 原理：把当前设备竖着划分成10等分，需要知道html大小，然后：

• 可以限定最大750px

3.px转换成rem的插件：cssrem setting中更多中settingjson 搜索cssroot 默认html16px，我们改成75（因为屏幕750,10份）       五 轮播图 1.  下载swiper插件 官网 package中swiper.min.css，css中swiper.css 官网复制html css js结构 2. 使用 ？？？？？？？？？？