之前在简述移动端网页显示适配方案(一)中,记录了浏览器从pc端到移动端转变时,默认的缩放和显示机制。我们通过设置width=device-width和限定设计稿宽度的做法,初步实现了移动端的兼容。早期移动设备的屏幕宽度大都是320px,虽然通屏的大图宽度可以设置为100%,以此让它自动适配设备宽度,但是其它非通屏的元素,只能通过px来定义。因此我们会将设计稿整体设计为320px的宽度来兼容各设备。

当固定宽度写法的网站在视网膜屏上显示时,会感觉到模糊。这是因为视网膜屏提高了屏幕的像素比(devicePixelRatio)。像素比是指屏幕的像素和图片的像素的比。每张图片都有自己的实际像素,视网膜屏就是用了多个像素来呈现图片上的一像素。

当像素比为2时,视网膜屏用了四个像素来显示图片上的一个像素,如果图片的像素不够大,则缺少的三个像素只能取当前像素点颜色的近似值来弥补。这个过程类似图片的放大(如下图)。

如果我们在100x100,像素比为2的视网膜屏幕上显示200x200的图片,那么刚好显示完整每一个像素。也就是说视网膜屏在屏幕的一个区域内能显示的图片像素更多了,如果图片本身的像素不够大,那就放大图片来弥补,因此就造成了模糊。此时我们可以通过将设计稿尺寸放大来适配视网膜屏。但是当这样的图片在普通屏幕上显示时,多出来的像素也被忽略了。普通屏幕的用户,白白加载了一张大图,但是显示的却是压缩版(如下图)

后来视网膜屏的像素比也是开始多样化,不只限于2,3

为了解决这些问题,页面仔们又开始做css媒体查询,响应式加载,或是准备几套图片,或者求助图片服务器的开发人员,想想都是一个好累的过程。好在现在我们有了rem方案,终于能happy的切切图了。

rem是一个单位,它是基于html根标签的字体大小来定义的一个单位。就是指如果我们设置html标签的font-size:50px;那么后续css中设置的1rem就是50px;为了适配所有设备,我们需要图片刚好铺满不同宽度不同像素比的屏幕。从结果来看,肯定是图片进行了缩放,只是不同设备的缩放比不同。

我们再引入栅格化的思想,通过js获取到屏幕的宽度,当设置html的font-size为屏幕宽度时,1rem就刚好是屏幕的宽度. 如果我们设置html的font-size为屏幕宽度的1/10时,那么1rem的宽度就是屏幕宽度的1/10。此时我们不用关心在不同设备下图片到底是被缩放到了多少px,尺寸都通过比例达到了统一。(如下图)

这时俺们切图时,只要将一个图标的尺寸,基于设计稿画布的尺寸,以1/10的比例换算成rem就可以.为了让切图仔不费脑,我们还给好多编辑器整上了比例切换的插件..但是后来我们连插件都懒得安装了。我们为什么要用1/10这样固定的比例呢,可以用1/(设计稿宽)这样的比例来算更方便。

比如设计稿是750px宽,那我们就设置html的font-size为(屏幕宽度)/750。考虑到小数的原因,我们还是用(屏幕宽度)/7.5,此时我们切片得到的100px宽度,就直接写成1rem,这个换算的难度我可以接受...(方法如下)

  function setRem(s){
     var html = document.documentElement;
     html.style.fontSize = html.clientWidth / s +"px";
     window.onresize = function(){
        html.style.fontSize = html.clientWidth / s +"px";
     }
  }
  Rem(7.5);

这样设计稿也不需要定的那么死了,640,750,1242是临界值,多一些少一些对清晰度的影响也不大,切图仔为了方便也可以让设计把设计稿做到750和1242中间。然后跟产品说,就这样吧,别搞什么响应式加载,图片服务器了