移动端的适配

一、名词

屏幕尺寸：屏幕对角线的长度，单位是英寸（1英寸=2.54厘米）

屏幕分辨率：指横纵方向上的像素点数，单位为px

屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi

实际上像素分为两种：设备像素（物理像素）和逻辑像素（css像素）

DPR：设备像素比DPR（devicePixelRatio）是默认缩放为100%的情况下，设备像素和css像素的比值

实际工作中我们得到的设计稿都是倍数图

二、单位

px是一个固定的值

em是根据其父元素的font-size计算

rem是根据根标签html的font-size计算

vm 设备视窗宽度的百分比

vh 设备视窗高度的百分比

三、移动端的适配

方法一：淘宝适配

淘宝适配 flexible.js

注意点：不需要添加移动端必备的meta语句，我们所测量出来的尺寸除以100即可，单位 rem

方法二：网易适配

将 html 的font-size设置为vw的单位，下面所有元素的尺寸都用rem为单位

公式：屏幕宽度 / 设计图宽度 = 根元素字体大小 / 假设的html文字像素大小

例如：设计图宽度为 750px，假设html的文字大小为100px，则

100vw / 750px = ? / 100px

? = 100vw * 100px / 750px

? = 100vw / 7.5

此时我们使用四则运算函数 将 html 的font-size设置为 calc(100vw/7.5)

设计图上测量的元素值 = 测量值 / 100，单位为 rem

我们可以把扁你其里的px转换成rem的比值设置成100即可，即 50px的测量值，转换为rem为0.5rem

四、注意点

移动端不存在安全区，都是占全屏

一般我们标题的文字大小使用rem为单位，能够随着屏幕的宽度改变而改变

中间的文字，一般用媒体查询更改 12px 14px 16px