移动端的三种适配方式——上

为什么要适配？

        由于移动端设备的屏幕尺寸不同，会出现：同一个元素在两个不同的手机上显示的效果不一样，要想让同一个元素在不同的设备上显示效果是一样的，无论采用哪种适配方案，中心原则永远是等比

---

先了解什么是理想视口

在2007年以前，人们使用的布局视口是980px的，造成的问题是网页出现缩放，整体元素变小，于是苹果公司推出了meta-view标签，用于移动端布局视口的控制。这个标签是用于开启理想视口的。

理想视口就是让布局视口=设备独立像素

（设备独立像素：每个设备的设备独立像素不太一样）例如iphone6/7/8是375,XR是414

正是由于各设备独立像素不统一，所以才会出现在不同设备下页面元素大小不同。

以往来说：布局视口都是980，元素在每个设备显示不同。

如今开启理想视口：布局视口=设备独立像素

也就是说当我们拿到一个设备独立像素375px（iphone6）的设计稿，当换用iphone xr（414）,其中的元素也会相应的变大以便用户能够看清同时更美观，以此完成适配的第一步

 如何开启理想视口？

                   其实当我们在vscode中 ! 的时候，就自动生成了，但是也要了解它的含义

当开启了理想视口，接下来就开始正式的移动端适配方案 

1.viewport适配

2.rem适配（主流方式近乎完美）

3.vw适配