CSS中适配移动端完美视口像素记录

拿iPhone6为例，ip6的物理像素是750px（均指宽度），查询得知完美适口的比例为2，即750px（物理像素）：375px（CSS像素） = 2：1
那么在电脑端制作一张宽为375px（CSS像素）的图片，加载到移动端，就可以充满屏幕，前提是meta设置为 meta name=“viewport” content="width=device-width

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如此会出现375px（CSS）的图片充满750px（物理）的屏幕，当该图在电脑上显示的时候，CSS像素和物理像素是1：1的即1px = 1px，但手机上是1：2，那么手机上1px（CSS）会占据4个（上下各俩）手机的物理像素，图片会放大失真，此时为了解决图片不清晰的问题，需要在电脑端就将图片放大，比如2倍或者3倍，拿2倍为例

在电脑端设计图直接设计为750px（css），如此一来适配的时候，当图片刚好充满屏幕的时候，750px（css）填充750px（物理像素），刚好1：1，不会被放大。

问题来了，如果直接用750px写，width ： 750px;只会有一半显示在屏幕中，需要通过调节比例，让750px全部显示在一个view中，因为完美视口的原因，在375px的时候写width ：375px;不会出现这种问题，所以需要用到100vw = 750px；以此来计算，最后用rem来表示width，而不再是使用px。

html{
    // 750px设计图物理像素对应手机显示屏100vw满视口宽度
    // 即750px=100vw--->1vw=100vw/750px
    // 将1vw*40设置为一个html的font-size即1rem(因为不*40，1rem小于12px，浏览器自动扩大为12px
    // 所以font-size: 100vw/@total-width * 40;就是设置的1rem
    // 750px是手机经典像素375px的2倍
    font-size: 100vw/@total-width * 40;
    background-color: #eff0f4;
}