移动端web自适应学习笔记

基础内容

1️⃣屏幕分辨率：

• 屏幕分辨率分为物理分辨率和逻辑分辨率，物理分辨率即为硬件分辨率，是显示屏出厂设置好的。逻辑分辨率是缩放调节的分辨率，是由软件/驱动设置的。

2️⃣视口：

• 视口是显示HTML网页的区域，用来约束HTML尺寸。

• 视口标签：<meta name=“viewport” content=“width=device-width”,initial-scale=1.0">

其中width=device-width：视口宽度=设备宽度

initial-scale=1.0：缩放1倍（不缩放）

3️⃣二倍图：现阶段设计稿参考机型是iPhone6/7/8，设备宽度为375px产出设计稿。二倍图设计稿尺寸：750px。

适配方案

1️⃣宽度适配：宽度自适应

• 百分比布局

• Flex布局

2️⃣等比适配：宽高等比缩放

• rem

• vw

rem适配方案

1️⃣基础内容：

• rem单位，是相对单位

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

• 1rem = 1HTML字号大小

2️⃣方案：将网页等分成10份，HTML标签的字号为视口宽度的1/10

3️⃣计算（px转rem）：

• 首先要确定基准根字号，基准根字号是视口宽度的1/10

• rem尺寸 = px单位数值 / 基准根字号

rem适配方案——媒体查询

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

2️⃣作用：让HTML标签字号能够根据设备分辨率的不同而改变。

3️⃣写法：

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

4️⃣媒体特征：

• max-width：最大宽度（不超过的都生效）
• min-width：最小宽度（大于的都生效）

5️⃣书写顺序：

• min-width：从小到大

• max-width：从大到小

• 因为后面书写的CSS层叠掉前面的CSS属性

6️⃣媒体查询的补充内容：

• 媒体查询可以加逻辑操作符，同时可选媒体类型。

• link引入外部CSS时也可以加上media属性，用来实现媒体查询。

rem适配方案——flexible.js

• flexible.js是手淘开发的一个用来适配移动端的js库。

• 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

rem适配方案——less

1️⃣介绍：Less是一个CSS预处理器，Less文件的后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力。

2️⃣注意：浏览器不识别Less代码。可以在VS Code里面安装Easy LESS插件，保存less文件后会自动生成对应的CSS文件。

• 在这里使用Less的一个主要目的是可以方便计算rem单位尺寸（px转rem）

less——运算

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

• 除法需要添加小括号或.

less——嵌套

• less的嵌套可以帮助快速生成后代选择器

.父级选择器{
	//父级样式
	.子级选择器{
		//子级样式
	}
}

• “&”表示的是当前选择器，代码写到谁的大括号里面就表是谁，不会生成后代选择器。主要应用在伪类或结构伪类。

less——变量

• 定义变量：@变量名：数据;
• 使用变量：CSS属性：@变量名;

less——导入与导出

1️⃣导入：

• 作用：导入less公共样式文件

• 语法：@import “文件路径”;

• 提示：如果是less文件可以省略后缀

2️⃣导出：

• 写法：在less文件的第一行添加： //out:储存URL

• 提示：文件夹名称后面要加/

3️⃣禁止导出：

• 写法：在less文件第一行添加：//out:false

vw适配方案

1️⃣基础概念：

• 相对单位

• 相对于视口的尺寸计算结果

• 是viewport width的缩写

• vh是viewport height的缩写

• 1vw = 1/100视口宽度

• 1vh = 1/100视口高度

2️⃣计算（px转vw）：

• 首先确定参考设备宽度（视口宽度），然后计算结果。

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

3️⃣提示：在实际开发中，vw和vh不能够混用，vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。