less

less，浏览器不识别。需要编译成css。

@import "comm.less";//引入less文件（模块化引入多个less）
.box1{
	border:1px solid red;
	.box2{//嵌套
		font-size:12px;
		width:100px + 100px;
		height:100px - 20px;
		height:100px * 2;
	}
}
/*变量*/
@a:100px;//宽度
@b:red;//颜色
@c:box6;//类名
.box{
	width:@a;
	color:@b;
}
.@{c}{
	width:@a;
	background-image:url("@{c}/1.png");
}

rem单位，适配布局。

• 文字、元素宽高等随着屏幕缩放。——rem可以解决。
• rem（root em）相对单位，类似em（对于父元素字体大小）。rem基准是相对于html元素字体大小。与em比好处：em锚定的父元素文字大小不一。而html设置文字大小可固定。html内子元素中的文字、盒子大小随着html文字大小变化而变化，从而整体控制页面样式。

<style>
html{font-size:14px;}
p{
	width:10rem;//p元素宽高=140px
	height:10rem;
	background-color:red;
}
</style>
<div>
<p>123</p>
</div>

• 怎么根据屏幕修改html文字大小？

• 媒体查询，根据屏幕尺寸加载不同样式。

//语法
@media 媒体类型 and|not|only(媒体特性){
	//css代码
	//媒体类型:all /print / screen 
}
/*媒体查询，一般从大到小或从小到大顺序来写不同档位*/

//pc屏幕 且 宽度小于539px时执行
@media screeen and (max-width:539px){
	html{ font-size:12px;}
}
//pc屏幕 且 宽度540 ~ 970 px时执行
//@media screeen and (min-width:540px) and (max-width:969px){
@media screen and (max-width:540px){
	html{ font-size:13px;}
	.top{
		height:1rem;
		font-size:.5rem;
	}
}

//pc/平板/手机等 且 宽度大于等于970px时执行
@media screeen and (min-width:970px){
	html{ font-size:14px;}
	.top{
		height:1rem;
		font-size:.5rem;
	}
}