一、移动适配——rem
- 媒体查询适配移动端屏幕
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
/* 以视口宽度为375为例 我们使用媒体查询 */
@media (width:414.4px) {
html {
font-size:41.4px;
}
}
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
/*使用rem为单位设置300px*300px的盒子（300/41.4=7.24rem)*/
.box {
width: 7.24rem;
height: 7.24rem;
background-color: pink;
}
- 利用rem+flexible.js画盒子适配移动端屏幕
1.插入js文件（在/body上面加）
<!-- 1.插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小 -->
<script src="./js/flexible.js"></script>
2.绘制盒子适配屏幕（默认以375px屏幕大小为参考去适配移动端，可使用快捷键alt+z快速生成rem单位）
/*画宽度为70px 高度为50px的盒子 以375px屏幕大小为参考去适配移动端 */
.box {
width: 1.8919rem;
height: 1.3514rem;
background-color: pink;
}
二、less语法
1.注释
//单行注释，css文件中不显示
/*
多行注释，css文件中显示
*/
2.计算
注意点：
a.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
b.运算符的前后，要么都加空格隔开，要么都不加
/*
less计算：
+ - * 除法./或者()
*/
.box {
width: 100px+100px;
height: 200-100px;
font-size: 10*3px;
width: (300px/3); //两种除法
width: 100./3px;
}
3.嵌套
作用：快速生成后代选择器。
语法：
image.png
4.变量
// 变量 @变量名: 值;
@themeColor:red;
.box1 {
background-color: @themeColor;
}
.box2 {
color: @themeColor;
}
.father {
background-color: @themeColor;
}
使用上面变量生成的css如下
.box1 {
background-color: red;
}
.box2 {
color: red;
}
.father {
background-color: red;
}
5.导入
// @import "你要导入的文件路径";
6.导出
//out: ../css/
注意点：
1.路径如果表示文件夹，最后一定要有/
2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
7.禁止导出
//out: false
8.压缩导出（导出的css文件省略空格等）
//compress:true,out:../css2/
特点：
节约成本，让网页渲染的更快
如果多个配置一起写，配置与配置之间以英文逗号隔开
