移动web第五天

移动适配

rem

rem设置网页元素尺寸, 可以让网页元素根据屏幕宽度等比例缩放

rem单位

1. 相对单位
2. rem单位是相对于HTML标签的字号计算结果
3. 1rem = 1HTML字号大小
4. 要利用媒体查询规定不同的屏幕宽度设置不同的根字号大小；屏幕宽度的1/10

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式, 当某个条件成立, 执行对应的CSS样式

书写格式:
@media (媒体特性) {
选择器 {
css属性
}
}

rem.png

flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

Less语法快速编译生成CSS代码

Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力

注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Less语法

1. 注释:
   单行注释
   语法：// 注释内容
   快捷键：ctrl + /
   块注释
   语法：/* 注释内容 */
   快捷键： shift + alt + A

2. 运算:
   加法: +
   减法: -
   乘法: *
   除法: ./ 或 (a / b)

3. 嵌套:
   后代选择器:

   
   
   less语法后代选择器.png
   
   

   子代选择器 > :

   
   
   less语法子代选择器.png
   
   交集选择器:
   
   less语法交集选择器.png
   
   并集选择器:
   
   less语法并集选择器.png
   
   

   伪类选择器:

   
   
   less语法伪类选择器.png

添加伪元素:

less语法添加伪元素.png

变量 @变量名: 值;

能够大大节约维护成本

声明变量.png

less文件导入

@import "你要导入的文件路径"
注意: less文件导入只能导入.less文件

less文件导入.png

less文件导出

out: ../css/
注意:
1.路径如果表示文件夹，最后一定要有 " / "
2.属于less配置信息，一定要写在第一行，如果写在第二行，那么第一行不能再写任何内容

禁止导出

out: false

压缩导出css

compress:true,out:../css2/

节约成本，让网页渲染的更快
如果多个配置一起写，配置与配置之间以英文逗号隔开