单位
绝对单位
相对单位
em
参考当前容器的文字大小
rem
参考根标签html标签的文字大小
%
媒体查询
查询不同的媒体设备进而应用不同的css样式
语法
@media (width: 300px) {
html {
font-size: 30px
}
移动端的适配
rem适配
-
媒体查询的适配
-
利用媒体查询针对于各个屏幕尺寸去设置一个不同的根标签字体大小。由于我们开发者书写的是一个固定的rem值，根据rem是要乘以根标签字体大小去计算的原理，即可实现适配
-
缺点，书写起来过于麻烦
-
手机淘宝团队封装的flexible.js框架配合px to rem插件快速实现适配
-
-
flexible.js
- 利用js的方式给每一个屏幕尺寸都设置了一个根标签的字体大小（当前屏幕宽度的尺寸 / 10）
- 引入方式 利用
语法糖
- 糖衣语法，便于开发者进行快速开发的语法规则。你按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率
常见的css预处理语言
-less
- sass、scss
-stylus
语法
-
编译
- easy less插件
- 在保存时可以在同级目录自动生成一个同名的css文件
-
注释
-
单行注释
- ctrl + /
- 不会编译到css文件中
-
块注释、多行注释
- shift + alt + A
-
-
变量
- @自定义的变量名: 值;
- 例子
- @theme_color: #0a0;
- 注意点：
- 变量结尾一定要有分号
- 调用变量的时候也要带分号
- 定义变量一般来说会写在整个文档的顶部
导入
@import "你要引入的less文件路径";
注意点
1. 和变量语法极其类似，注意区分
2. import 后面是空格 是空格 是空格 不是冒号 不是等号
3. 导入的只能是less文件，如果路径有误，则无法编译
4. 后缀名.less可省略
5. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中。
导出
// out: ../css/
// out: false
禁止导出
注意当前代码只能写在第一行，以单行注释的方式出现
css压缩
- // compress: true
- 把输出的css文件进行压缩（去掉多余的换行空格和分号）
- 减少css文件的体积
