web移动端屏幕适配方案

因为手机屏幕的分辨率大小不一 ，如果使用传统的静态布局，把每个元素的宽高样式写死，在不同的屏幕中就有各种各样的显示效果。这显然不是我们想要的结果。我们需要的是根据屏幕分辨率的不同，来适配不同的样式大小。使不同的手机分辨率下都有相同的样式布局

1.rem适配

1rem就是html标签font-size的大小，在rem适配方案中，我们以rem作为基值来设定元素的大小。1rem单位越大，元素的大小也就越大，1rem单位越小，元素的大小也就越小

实现方法：通过js获取屏幕的分辨率来动态设置1rem的大小，即屏幕分辨率越大 => 1rem越大 => 元素也越大，这样来适配不同分辨率的屏幕

缺点：需要手动转换rem和px

注意：需要设置完美视口。另外1rem的值虽然可以自定义，但是谷歌浏览器有最小字体为12px，所以设置rem的时候要保证最小屏幕下的1rem不能小于12px

方法一：设置html元素的内联样式

方法二：添加style标签，为html标签设定样式，这种方法可以将样式权重提升为最高

2.viewport适配

viewport适配就是使用缩放，将固定大小的页面缩放成与屏幕分辨率一样的大小

优点：只需按设计图1:1的大小来设定元素的大小即可，无需考虑数值转换（数值转换交给scale去做）

在meta标签中，scale=1.0就相当于设定width=设备独立像素的大小
以设计图为640px为例，假设我们的手机屏幕宽度是375px，在scale=1时就会出现这种效果：

这种方案下我们需要破坏完美视口，修改scale的值来适配不同屏幕。只要将页面缩小到手机屏幕的尺寸，这样就不会再出现滚动条（375/640=0.5859375）

实际开发中，手机的屏幕大小有很多种，并不是固定的。页面也是一样，并不是固定的640，所以需要 用js来动态设置scale的值