为什么设计稿是750px

  前一阵子,在研究了物理像素、设备独立像素和css像素以及viewport后,我产生了一个问题,就是为什么我们的UI所给的设计稿是750px。
  这里所说的750px并不是绝对的,750px是iphone6的物理像素,也叫屏幕分辨率。所以这里只是泛指移动端设计稿是按照设备的物理像素所给。那先来说一下这几个像素吧。

  • 物理像素:
        顾名思义,就是设备屏幕上的实际像素。也就是说这个手机被出厂造出来的时候,这个屏幕上有多少个像素点,他的物理像素就是多少;
        
  • 设备独立像素:
         也叫做逻辑像素(对于前端来说,和我们的css像素是一样的),这个不同的设备是不一样的。在viewport为ideal-viewport模式时, 如iphone6此时的viewport为375px,代表着我们在css中写375px就可以达到全屏的效果;

      那么这个时候我就有一个问题了,按照这样说,UI的设计稿就应该按照css像素(如ipohone6应该给375px的设计稿)给,这样我们我们量出来直接写不就刚好。但是!!!我们忽略了一个问题!那就是,我们在移动端中会使用rem方案,来做不同设备间的适配,可以实现同一份代码在不同的设备上展示的效果都是合适的。而rem实际上就是做了物理像素和css像素之间的转换。我们先来po一下代码:

(function () {
   function changeRootFont() {
      var designWidth = 750, rem2px = 100;
      document.documentElement.style.fontsize = 
     ((window.innerWidth / designWidth) * rem2px) + 'px';
     //iphone6: (375 / 750) * 100 + 'px';
   }
   changeRootFont();
   window.addEventListener('resize', changeRootFont,false);
})();

这段代码不难懂吧,可以看到,我们通过动态的获取设备独立像素,然后除以设计稿的宽度,然后赋给根字体的fontsize,以致来动态改变跟字体大小,做到自适应。但至于为什么要乘100,首先375 / 750是0.5,浏览器默认最小字体为12px,所以我们需要放大一些,而100又很好算,我们只需要将设计稿量出来的长度(px),小数点向左移2位,单位变成rem就好了。你懂了吗~
  所以说,rem相当于为我们做了物理像素与css像素之间的转换。所以设计稿直接给物理像素的就好了。当然,直接给css像素的,我们也可以直接量多少写多少,也能完美适配,但是!这个完美适配只对于一个设备!或者是一类,一类css像素就是375px的设备,显然,这不合适。

发布了38 篇原创文章 · 获赞 16 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览