移动web 05-day(移动适配---相对单位/Less语法)

1.长度单位--rem

.可以使用rem单位设置网页元素的尺寸
.rem是相对单位,是相对于HTML标签的字号计算结果,1rem = 1HTML字号大小

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

1.png

.目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

2png

3.png

03-在body标签的最后一行插入<script src="./js/flexible.js"></script>,以实现在不同宽度的设备中，网页元素尺寸等比缩放效果

4.png

2.Less语法

.Less是一个CSS预处理器, Less文件后缀是.less
.扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力(CSS是不支持计算写法的,但是可以通过Less语法进行计算,然后再编译转换为CSS文件)
.注意：浏览器是不会识别Less代码的，目前阶段，网页要引入对应的CSS文件

5.png

01-注释
单行注释
语法：// 注释内容
快捷键：ctrl + /
注意:单行注释不可以编译到css文件里面(在css里面不显示)

块注释
语法：/* 注释内容 */
快捷键： shift + alt + A
注意:块级注释可以编译到css文件里面(在css里面显示)

02-计算
加、减、乘直接书写计算表达式(+ - *)
除法需要添加 . 或 小括号 --- ./或者(数字1 / 数字2)
注意点：
1.单位没有顺序之分，如果一个表达式之中有多个单位，以第一个单位为准
2.运算符的前后，要么都加空格隔开，要么都不加

03-嵌套

6png

7.png

.生成后代选择器

8.png

.生成子代选择器

9.png

.生成交集选择器

10png

.生成并集选择器

11.png

.生成伪类选择器

12.png

.添加伪元素

13.png

.生成结构伪类选择器

14.png

04-变量
思考：
Ø 网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
Ø 方法一：逐一修改属性值（太繁琐）
Ø 方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名(使用Less变量设置属性值)
.变量：存储数据，方便使用和修改

语法：

Ø 定义变量：@变量名: 值; ---(变量名自定义)
Ø 使用变量：CSS属性：@变量名;

15.png

05-导入
注意:less里面只能导入less格式的文件,导入后的文件,会自动编译成css文件使用
.导入的两种方式
@import url(./04-嵌套.less);
@import "./03-计算.less";

06-导出
.在Less文件第一行添加---// out:文件路径
注意点：
1.路径如果表示文件夹，最后一定要有/
2.导出属于less配置信息，一定要写在第一行，或者less配置信息的前面没有任何内容,否则导出无效

16png

07-禁止导出
在less文件第一行添加: // out: false

08-压缩导出
.压缩导出属于less配置信息，一定要写在第一行
.压缩导出的好处是节约成本,让网页渲染的更快
语法:// compress:ture
注意:如果多个配置一起写，配置与配置之间以英文逗号隔开,例如---// compress:ture,out:../css2/

17png