bg.png
一.rem
目标：能够使用rem单位设置网页元素的尺寸
1.rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
2.媒体查询
2.1手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？
使用媒体查询
- 媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
- 当某个条件成立, 执行对应的CSS样式
2.2 媒体查询写法
1.png
手机屏幕大小不同，分辨率不同， 设置不同的HTML标签字号
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
屏幕宽度为 320px 1html字号大小为32px
屏幕宽度为 375px 1html字号大小为37.5px
......
2.png
1rem单位=1html字号大小
rem单位的尺寸 = px单位数值 / 基准根字号
3.flexible.js
- flexible.js是手淘开发出的一个用来适配移动端的js框架
-
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
3.png
二.less
- Less是一个CSS预处理器, Less文件后缀是.less
- 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
-
使用vscode插件 Easy Less less文件自动生成css文件
4.png
1.less语法
1.1 注释
- 单行注释
语法://注释内容
快捷键:Ctrl+/
特点:不会编译到css文件中 - 块注释
语法:/* 注释内容 */
快捷键:shift+Alt +a
特点:会编译到css文件中
1.2 计算
运算加 + 减 - 乘 *
除法./或者(/)
.box {
width: 100 + 100px;
height: 300px - 100;
font-size: 2 * 10px;
// width: 500 ./ 10px;
width: (500 / 10px);
height: 100px + 200deg + 300rem;
width: 100+ 200px;
width: 100 +200px;
height: 100px+200px;
}
注意点：
1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
2.运算符的前后，要么都加空格隔开，要么都不加
1.3less嵌套写法
- 生成后代选择器
直接在父元素样式内写子元素的样式
写法:
.box {
width: 200px;
height: 200px;
.title {
background-color: #fff;
.left {
font-size: 20px;
}
.right {
margin-left: 20px;
}
}
}
生成的css文件:
5.png
- 生成子代选择器 >
写法:
.father {
background-color: #fff;
> .son {
background-color: red;
> .sun {
background-color: blue;
}
}
}
生成的css文件:
6.png
- 交集选择器 &符号指代的是直接上级
写法:
.box1 {
width: 20px;
span{
&.box2{
background-color: #fff;
}
}
}
生成的css文件:
7.png
- 并集选择器
写法:
.box1,
.box2 {
background-color: #fff;
}
.box1 {
&,
.box2 {
background-color: #fff;
}
}
生成的css文件:
8.png
- 伪类选择器 :hover
写法:
.box {
a:hover {
background-color: #fff;
}
a {
&:hover {
background-color: #fff;
}
}
li:hover {
a {
color: #fff;
}
}
li {
&:hover {
a {
color: #fff;
}
}
}
}
生成的css文件:
9.png
- 添加伪元素
写法:
.box {
li::before {
content: '';
}
li {
&::before{
content: '';
}
}
}
生成的css文件:
10.png
- 结构伪类选择器
写法:
.box {
li:last-child{
color: #000;
}
li {
&:nth-child(2) {
color: #fff;
}
}
}
生成的css文件:
11.png
1.4变量
语法 :
- 定义变量: @变量名: 值;
-
使用变量: css属性:@变量名
12.png
1.5导入less
语法:
- @import “文件路径”; --------推荐
- @import url(文件路径);
注意:只能导入less文件
1.6 less导出css文件
- 方法一:配置EasyLess插件， 实现所有Less有相同的导出路径
- 方法二:控制当前Less文件导出路径
语法:// out: ../css/
注意点:
1.路径如果表示文件夹，最后一定要有/
2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容
1.7 禁止导出
语法: //out: false
*写在文件第一行
1.8 压缩导出
语法: //compress: true , out: ../导出位置/
作用:作用:节约成本,让网页渲染更快
