移动设备适配

看到最简单移动端适配的一篇文章写到移动端适配可以只在更元素html中写入 font-size: 13.333333vw;再结合布局中使用rem来实现移动端的尺寸适配；适配方案可见文章，这次也彻底明白为什么设计稿一般是750px，iPhone6的物理像素是750；但是逻辑像素是375px，可以在Chrome中使用移动端调试模式查看iPhone6宽度css尺寸是375px 因为是retina高清屏；屏幕以2个物理像素来显示一个逻辑像素；所以我们设计稿中需要使用750，而我们实际开发中需要写css像素，也就是逻辑像素，这里面就涉及单位转换，根元素html设置为13.3333vm因为vm是代表视口的宽度；可以理解为所占屏幕的百分比；1vm占据的宽度是屏幕的1%宽度；

然后这个13.333333vw来源如下：

首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？ 是不是 1px = 100 / 750 vw = 0.13333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

思路过程：

mobile.width = 750px  => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

即：我们把html:{font-size: 13.33vw} // 也就是以100px位基准；1rem = 100px;

现在就好算多了；移动端的尺寸 / 100  =  XXX rem；

 

所以我们拿到750设计稿之后，讲根元素设置为13.333333vw ，然后直接将设计稿px单位除以100, 写成rem单位，这样就可以让尺寸自适应不同单位的屏幕了；