css 尺寸单位和移动端适配

1. 尺寸单位

   • px：绝对单位，不会动态改变，和设备像素有关；电脑端，一般和设备像素1:1的关系，1设备像素=1浏览器像素；移动端，分辨率可能达到2k，但是宽度却很窄所以此时 n设备像素=1浏览器像素。px指的是浏览器像素，并不是设备像素
   • em：相对单位，会动态改变，em是相对于其父元素的font-size，页面层级越深，em换算越复杂，麻烦。
   • rem：相对单位，会动态改变，rem是相对html根元素的font-size，不受页面层级的影响
   • vw,vh：相对单位，会动态改变， 1vw等于视口宽度的1%，1vh等于视口高度的1%，在电脑端视口指的是浏览器的可视区域，在移动端指的是Layout Viewport

2. 视口（Viewport）

   • 在电脑端视口指的是浏览器的可视区域
   • 在移动端，有三个视口，分别是Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）；
     • Layout Viewport：浏览器的内容区域，为了兼容显示电脑网页，这个区域默认比可是区域要大，所以查看电脑端网页会出现滚动条。一般980px或1024px
     • Visual Viewport：浏览器的可视区域
     • Ideal Viewport：移动端浏览器的理想窗口，简单的说，无论设备多高的像素，只相对于设备的宽高来划分像素。即 px=多少设备像素，由此来设定。iphone 是320px，安卓设备就比较复杂了，有320px的，有360px的，有384px的等等。像上面Layout Viewport的默认980像素在iphone上就是980/320=3 倍的iphone宽度

3. 移动端适配方案
   例子：750px的设计稿，步骤如下

   1. 让Layout Viewport=Ideal Viewport
      内容是显示在Layout Viewport上，为了不出现滚动条，必须让Layout Viewport=Ideal Viewport，可以加上如下代码

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
      

   2. 设置html{font-size:100/750*100vw}
      以iphone为例，要想把750px的设计稿放到320px的iphone上，设计稿上的元素就要进行缩小，比例就是320px/750px=0.42。iphone是0.42，但是其他设备则不是，要解决这个问题可以用vw单位，任何设备的宽度都是100vw，那么缩放比例就是 100vw/750px=0.13333vw/px。比如一个按钮宽度是100px，那么应该写width:13.3333vw，但是这样自己换算太麻烦，完全可以让电脑来自动换算，这时可以让html{font-size:0.13333vw}，1rem=0.13333vw，那么此时宽度就可以写成width:100rem，为了方便通常会让html{font-size:13.333vw}，这样 1rem=100px