移动Web第四天 1 移动适配

移动Web

老师：黑马程序员

四、移动Web第四天

1 移动适配

rem :目前多数企业在用的解决方案

vw / vh :未来的解决方案

1.1 长度单位

1.1.1 rem

网页效果

屏幕宽度不同，网页元素尺寸不同(等比缩放)

px单位或百分比布局可以实现吗?

• px单位是绝对单位

• 百分比布局特点宽度自适应，高度固定

适配方案

• rem
• vw / vh

1.1.2 rem单位

能够使用rem单位设置网页元素的尺寸

【rem】

相对单位

rem单位是相对于HTML标签的字号计算结果

1rem = 1HTML字号大小

1.1.3 rem移动适配

能够使用rem单位设置网页元素的尺寸

1.1.4 rem移动适配——媒体查询

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

当某个条件成立,执行对应的CSS样式

1.1.5 rem适配原理

实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem单位尺寸

1.根据视口宽度，设置不同的HTML标签字号

2．书写代码，尺寸是rem单位

• 2.1确定设计稿对应的设备的HTML标签字号
  查看设计稿宽度→确定参考设备宽度(视口宽度)→确定基准根字号(1/10视口宽度)
• 2.2 rem单位的尺寸
  N* 37.5 = 68 →N = 68/ 37.5
  rem单位的尺寸= px单位数值/基准根字号

1.1.6 flexible

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

1.1.7 vw/vh

相对单位

相对视口的尺寸计算结果

vw : viewport width

• 1vw = 1/100视口宽度

vh : viewport height

• 1vh = 1/100视口高度

【vw单位尺寸】

w单位的尺寸= px单位数值/(1/100视口宽度)

【vh单位尺寸】

vh单位的尺寸=px单位数值/(1/100视口高度)

1.2 Less

1.2.1 Less语法

使用Less运算写法完成px单位到rem单位的转换

Less是一个CSS预处理器, Less文件后缀是.less

扩充了CSS语言,使CSS具备一定的逻辑性、计算能力。

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

1.2.2 编译插件

Easy Less：

• VScode插件
• 作用：less文件保存自动生成css文件

1.2.3 注释

单行注释

• 语法∶/注释内容

• 快捷键:ctrl +/

块注释

• 语法︰/注释内容/

• 快捷键: shift + alt + A

1.2.4 运算

加、减、乘直接书写计算表达式

除法需要添加小括号或.

表达式存在多个单位以第一个单位为准

1.2.5 使用Less嵌套写法生成后代选择器

嵌套：

• 作用：快速生成后代选择器

• 语法

  

• 注意∶&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

1.2.6 变量

变量:存储数据，方便使用和修改。

语法∶

• 定义变量:@变量名:值;
• 使用变量:CSS属性:@变量名;

1.2.7 使用Less导入

@import “文件路径”

1.2.8 使用Less导出

• EasyLess插件
• 控制当前Less文件导出路径

设置禁止导出：less文件第一行添加 // out :false