看到最简单移动端适配的一篇文章写到移动端适配可以只在更元素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单位,这样就可以让尺寸自适应不同单位的屏幕了;