移动端开发的单位选择

名词

  1. 物理像素/设备像素 dp 即表示设备的屏幕真实尺寸。
  2. 逻辑像素 px 即表示设备宣称的分辨率
  3. 设备像素比 dpr 即 px/dp

为什么在pc端设置的font-size=12px,在手机上看的时候却非常的小?就是因为电脑屏幕的dpr为1,但是手机却有着各种不同的dpr的值,想在手机上达到同等的视觉效果就需要font-size: 12px * dpr。

这里提供了主流设备,包括主流手机、平板甚至手表的dp、px、dpr,方便开发和设计人员参考
device metrics

获取 dpr

可以通过window获取当前平台的dpr值

window.devicePixelRatio

推荐的做法

其实美好的响应式设计,在现实中的实现有时候并不是那么好。推荐使用lib-flexible 来解决移动端的响应开发。

lib-flexible 帮我们做了下面几件事

  1. 元素的单位用rem,并在每个设备上面动态计算出rem的基准值,使得在各个设备上的显示效果一致
  2. 字体单位用px, 并在每个设备上提供计算好的drp,通过形如下面的方法,使得字体的显示效果一致

     div {
           width: 1rem;
           height: 0.4rem;
           font-size: 12px; // 默认写上dpr为1的fontSize
     }
    
    [data-dpr="2"] div {
           font-size: 24px;
    }
    
    [data-dpr="3"] div {
        font-size: 36px;
    }
    

更好的方法

flexible 布局方案其实在平板等大尺寸的屏幕,或者横屏状态保留很多的白边部分,这个问题,在传统通过百分比实现响应式布局中是不存在这个问题的。而且设计稿rem的换算可能不是那么方便,而且对于多栏布局,rem的值出现小数也会是头疼的问题,为此不得不又写了个makegrid.js去处理栅格系统。

web标准的制定过程可能没有更好的考虑响应式设计的良好支持,所以就出现了各种解决方案,各有优劣。

接下来我们需要更好的解决方案,或者基于浏览器、web标准的支持方案。