移动端适配概念

1.百分比单位；

2.vw 和 vh

3.媒体查询 + rem;

注意：不能使用px作为移动端适配的单位。

在高清屏下，1个css像素 1px 所占用的物理像素点是动态变化的，在高清屏中，同样是100px，此时

1px只是占用的像素点更多了而已。因此不管切换到什么样式的屏幕尺寸下，100px始终看起来就是

那么大，所以px不能作为适配单位。

物理像素：(设备像素)：一个设备的屏幕是由一个一个的小像素点组成的，设备出场时，屏幕有多

少个像素点构成是一定的

逻辑像素：(逻辑像素 css像素)：px，它是我们前端开发使用的一个单位

手机屏幕分为1倍屏，2倍屏，3倍屏

1倍屏：1px的css像素，对应1个物理像素点

2倍屏：1px的css像素，对应2个物理像素点

移动端适配方案(rem+@media)

1.假设设计稿尺寸为 375px,我们将屏幕尺寸分为若干份，比如10份，

12份，15份，20份等。然后设置html的font-size,比如375px,评分15份，一份为25px,即html(font-

size:25px)

2. 假设设计稿尺寸为：375px,将设计稿中元素的尺寸转换为rem。虽然其他尺寸下元素的rem没有

变化，但是html的font-size是根据媒体查询在动态变化的，所以最终计算出来元素的尺寸也是动态

变化的。

px 换算 rem ：安装插件 px to rem & rpx(cssrem)

设置基准为font-size:375px/15等份

name="viewport" :表示视口标签

width=device-width：布局宽度 = 设备宽度

initial-scale=1.0：初始缩放比例，页面一打开按照原本的大小展示

maximum-scale = 1.0:最大缩放比

minimum-scale=1.0:最小缩放比