day05 rem适配
rem
就是一个单位 5rem
根据不同屏幕进行适应（等比缩放）
rem单位
特点：
-
html标签写字号
-
不同设备如何设置不同的html标签字号
-
字号设多少合适
-
视口宽的1/10
-
-
媒体查询
语法实例：（移动适配）
/* 1.适配375宽度 的手机 */
@media (width:375px) {
html {
/*根字号*/
font-size: 37.5px;
}
}
flexible.js
js组件，配合rem实现在不同宽度的设备中网页元素尺寸等比缩放（适配）
-
引入js文件
<script src="./js/flexible.js"></script>
-
只需要拿一块屏幕去适应其他即可（先写一个屏幕大小）
-
插入js文件 标签 script 已经根据不同的视口宽度设置了不同的html根字号的大小
设置插件
-
打开设置
-
设置插件的json文件，改为37.5（报错不管）
-
打开设置，搜索wrap，开启on
-
快捷键直接换算px-rem
less
目标：
使用Less运算写法完成px单位到rem单位的转换（辅助写css的）
Vscode操作
安装插件：Easy Less
语法
注释
-
单行注释
快捷键：ctrl + /
不可以显示在less中
-
块注释
快捷键： shift + alt + A
可以被显示在less中
计算法
-
加、减、乘直接书写计算表达式：
width: 100 + 10px;运算符前后（正确是写法）：
-
符号前后加空格
-
符号前后不加空格
-
-
除法需要添加 小括号 或 . ：
width: (68 / 37.5rem); -
如果一个表达式中有多个单位，以第一个单位为准
★嵌套
-
1.生成后代选择器
-
2.生成子代选择器 >
直接用> 连接父类
-
（使用频率少）3.交集选择器
&符号指代的是直接上级
-
4.并集选择器
-
5.伪类选择器 :hover
-
6.添加伪元素
li{
&::after{
content: '';
}
} -
7.结构伪类选择器 直接写在选择器的后面是没有提示的
li{
&:nth-child(2){
color: #fff;
}
}
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
设置变量
定义：@color:pink;
调用：
.box{
color:@color
}
优点：方便后期统一更改
导入文件
-
less文件中引入less文件：
-
注意
如果是less文件可以不加后缀名
less中只能导入less文件，无法导入css文件
导出css文件
方法一：插件中设置（ppt—day05——31页）
方法二：单独文件导出：// out: 路径
注意：
-
导出的路径必须以“ / ”结尾，表示文件夹
-
导出属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
禁止导出css
// out: false
压缩导出css
语法：//compress:true
多个配置语法
-
一律写在第一行，中间用空格隔开，后续的配置不需要加“//”
//out: ./ , compress:true
项目演练
项目准备
引入link三个文件：
js文件：
项目进行
实时课堂效果：
-
在移动端模仿鼠标按下变化的效果：
无需再另外书写其他css或者引用
a{
// 鼠标按下不抬起的效果
&:active{
color: #fff;
}
} -
让图片大小适配任何移动端屏幕（这个是放在外部的）
// 让图片大小适配任何移动端屏幕
img{
width: 100%;
}
预习内容的项目
-
固定定位后的底部工具栏脱标会盖住最底部的内容，因此需要把盒子忘上顶出地处盒子大小的固定宽度
.main{
// 为了不盖住底部内容
padding-bottom: (50 / 37.5rem);
} -
由于37.5是要用于转换大小的，会频繁使用，因此在less文件中，将其设置为属性名，以后直接调用，而且位置要往最上面写
@rootSize:37.5; -
顶部轮播图区域需要设置高，为了避免将来底部小圆点定位脱标的时候乱跑
.banner{
height: (160 / @rootSize);
} -
定位小图标的背景图片由于太大了显示不全，让他铺满盒子不要外溢，设置bgz属性
.active{
background-size: contain;
} -
交集选择器
含义就是：不仅仅要拥有active这个类，还要同时具有off这个类的标签才能被控制
.active{
background-size: contain;
&.off{
background-image: url(../images/status_default.png);
}
} -
h5折行，让免费显示，给h5加宽度
h5{
width: (290 / @rootSize);
} -
字体图标本身有设置fz，如果是继承有字号设置的属性，是不起作用的，要单独再给i标签设置字体大小
p{
margin-right: (15 / @rootSize);
font-size: (11 / @rootSize);
i{
font-size: (11 / @rootSize);
}
} -
注意写到底部的字体图标时，设置i标签控制大小不生效，权重过低，适配直接设置了iconfont这个类去控制
-
21
-
11
-