布局视口和视觉视口 VM-REM

视觉视口：用户在自已的手机、电脑、平板等设备上看到的页面，用户只能通过缩放，或托动来查看更多内容，该视口与具体的终端设备相关
解决方案：修改布局视口的宽度，让它等于视觉视口

布局视口：width
视觉视口：device-width
理想视口：布局视口==视觉视口 也就是 width==device-width
initial-scale=1.0原始缩放，按照1比1显示
meta：定义页面的“元数据” name="viewport"要解释的是视口
1、移动端布局，为什么要用 rem ？ 
因为 引用根字号
2、1rem多大合适？
1rem = 100px
3、为什么rem 不能写死？
rem应该随着设备宽度而变化，不能是一个写死的值
现在主流的移动端布局解决方案是：rem+vw
rem + vw 方案的二个问题
1 1vw=多少
当前iphone6/11： = 375px
2 375px 就是当前设备的“视觉视口” 用100VW表示
结论：100vw = 375vw
1vw = 100vw/100 = 375px/100 = 3.75px
iphone6/11： 375px/3.75=100px 
iphone12/13：390px/3.75 > 100px
iphone11max：414px/3.75 > 100px
所以，将绝对值px 转为 相对值
无论手机屏幕有多宽，都可以用100VW来表示
iphone6/11： 375px/3.75=100px = 1rem
iphone12/13：390px/3.75 = 104px = 1rem
iphone11max：414px/3.75 = 100px = 1rem
用vw来动态表示 REM 实现响应式移动端布局
iphone手机的DPI：表示像素设备比，iphone默认是 2 
DPI：设备像素比 window.devicePixelRatio
布局一个重要前提：与具体设备无关，面向逻辑页面来布局
使用375PX逻辑像素布局，根据DPI，可以快速换算成为物理像素
375px