单位
绝对单位
相对单位
-
em
- 参考当前容器的文字大小
-
rem
- 参考根标签html标签的文字大小
-
%
媒体查询
查询不同的媒体设备进而应用不同的css样式
语法
- @media (width: 300px) { html { font-size: 30px } }
移动端的适配
rem适配
-
媒体查询的适配
- 利用媒体查询针对于各个屏幕尺寸去设置一个不同的根标签字体大小。由于我们开发者书写的是一个固定的rem值，根据rem是要乘以根标签字体大小去计算的原理，即可实现适配
- 缺点，书写起来过于麻烦
-
手机淘宝团队封装的flexible.js框架配合px to rem插件快速实现适配
-
flexible.js
- 利用js的方式给每一个屏幕尺寸都设置了一个根标签的字体大小（当前屏幕宽度的尺寸 / 10）
- 引入方式 利用
-
如何得到rem值？
- ?rem * 37.5px = 你测量出的数值
- ？rem = 测量出的数值 / 当前ui设计师给你的设计稿对应的根标签字体大小
- 如果ui给你一张750的设计稿，2倍图，所以设计稿真实尺寸是 375 那么根标签字体大小应该是 37.5
- 如果ui给你一640的设计稿，2倍图，所以设计稿真实尺寸是 320 那么根标签字体大小应该是 32
-
px to rem
-
alt + Z 可以快速将px->rem rem->px
-
-
less语法
css预处理语言
- 由于浏览器不认识less文件，所以我们要对less文件做一个预处理操作，less编译成浏览器能够看懂的css文件。最后我们在html文件中引入的还是css文件
语法糖
- 糖衣语法，便于开发者进行快速开发的语法规则。你按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率
常见的css预处理语言
-
less
-
sass、scss
-
stylus
语法
-
编译
- easy less插件
- 在保存时可以在同级目录自动生成一个同名的css文件
-
注释
-
单行注释
- ctrl + /
- 不会编译到css文件中
-
块注释、多行注释
- shift + alt + A
-
-
变量
-
@自定义的变量名: 值;
-
例子
- @theme_color: #0a0;
-
注意点
- 变量结尾一定要有分号
- 调用变量的时候也要带分号
- 定义变量一般来说会写在整个文档的顶部
-
-
导入
-
@import "你要引入的less文件路径";
-
注意点
-
- 和变量语法极其类似，注意区分
-
2. import 后面是空格 是空格 是空格 不是冒号 不是等号 -
3. 导入的只能是less文件，如果路径有误，则无法编译 -
4. 后缀名.less可省略 -
5. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中。
-
-
-
嵌套
-
.box { .son{ width: 100px; &:hover { color: #00a; } } }
- .box .son { width: 100px; } .box .son:hover{ color: #00a;
-
&可以去掉后代选择器的空格
- 多应用于伪类、伪元素选择器
-
-
导出
-
// out: ../css/
-
// out: false
- 禁止导出
-
注意当前代码只能写在第一行，以单行注释的方式出现
-
-
css压缩
- // compress: true
- 把输出的css文件进行压缩（去掉多余的换行空格和分号）
- 减少css文件的体积
-
sourceMap
-
// sourceMap: true
-
希望浏览器提示出less的行号
-
连写
- // compress: true, out: ../css/ , sourceMap: true
-
-
拓展
- mixins混入
- 看代码
-
css原生语法中的运算
-
calc(100px + 100px);
-
语法较为严格
-
加法和减法运算符前后必须加空格
-
单位是参与运算的
-
calc(100px + 100px);
- 正确
-
calc(100px + 100);
- 不正确
-
calc(100px * 100px);
- 不正确
-
calc(100px * 100);
- 正确
-
-
-
ie9以下是不支持的
-
vscode配置
标签配对高亮
-
Highlight Matching Tag
-
需要在设置文件中键入当前代码
- "highlight-matching-tag.styles": { "opening": { "name": { "highlight": "#ff0" } } }
括号配对高亮
- 2021年12月vscode更新的功能
- "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true,
