一.移动适配
1.
适配移动端过程：
1.要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10
2.页面元素就可以使用rem相对单位，1rem=1html文字大小
2.less
1.注释
/*
shift+alt+a
块注释，是会编译在css中
*/
/**
这里会编译码
**/
2.计算
/*
less计算：
+ - * 除法./或者()
注意点：
1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
2.运算符的前后，要么都加空格隔开，要么都不加
*/
3.嵌套
// 1.生成后代选择器
.box {
width: 300px;
height: 300px;
.title {
border-radius: 50%;
.left {
margin-left: 40px;
}
.right {
padding-top: 50px;
}
}
}
// 2.生成子代选择器 >
.father {
background-color: purple;
> .son {
background-color: #6cf;
> .sun {
background-color: orange;
}
}
}
// 3.交集选择器 &符号指代的是直接上级
.box1 {
color: #6cf;
span {
&.box2 {
color: aliceblue;
}
}
}
// 4.并集选择器
.box1,
.box2 {
color: #333;
}
.box1 {
&,
.box2 {
color: #999;
}
}
// 5.伪类选择器 :hover
.box {
a:hover {
color: #666;
}
a {
&:hover {
color: #444;
}
}
li:hover {
a {
color: #222;
}
}
li {
&:hover {
a {
color: #333;
}
}
}
}
// 6.添加伪元素
.box {
li::before {
content: '';
}
li {
&::before {
content: '';
}
}
}
// 7.结构伪类选择器 直接写在选择器的后面是没有提示的
.box {
li:first-child {
margin-left: 0;
}
li {
&:nth-child(2) {
margin-bottom: 0;
}
}
}
4.变量
// 变量 @变量名: 值; 大大节约维护成本
/*
变量名看做是一个存值的容器
*/
5.导入
// @import "你要导入的文件路径";
// less文件导入只能导入.less文件
@import url(./03-计算.less);
@import './04-嵌套.less';
6.导出
// out: ../css/
/*
注意点：
1.路径如果表示文件夹，最后一定要有/
2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
*/
7.禁止导出
//out: false
8.压缩导出
// compress:true,out:../css2/
/*
节约成本，让网页渲染的更快
如果多个配置一起写，配置与配置之间以英文逗号隔开
*/
