移动web（4）

移动适配

• rem：目前多数企业在用的解决方案
• vw / vh：未来的解决方案

一、 长度单位（rem、vw/vh）

1. rem

• 使用rem单位设置网页元素的尺寸：网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

2. rem单位

• 相对单位
• rem单位是相对于HTML标签的字号计算结果
• 1rem=1HTML字号大小

3. rem移动适配——媒体查询

• 媒体查询能够检测视口的宽度，然后编写差异化的css样式
• 写法：

@media (媒体特性) {
    选择器 {
        CSS属性
    }
}

//例
@media (width:300px) {
    html {
        font-size: 30px;
    }
}

4. rem适配原理

5. flexible

 

二、Less

1. Less

• Less是一个CSS预处理器，Less文件后缀是  .less
• 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
• 注：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件

2. Less语法

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

2.1 注释

单行注释：

• //注释内容      (快捷键：Ctrl+/)

块注释：

• /* 注释内容 */   (快捷键：shift+alt+A)

2.2 运算

 2.3 嵌套

2.4 变量

使用Less变量设置属性值

 

2.5 导入 导出

1）导入

使用Less导入写法引用其他Less文件

2）导出

使用Less文件 导出CSS文件