从网易与淘宝的font-size思考前端设计稿与工作流

2015-10-15 09:48 稿源:博客园  0条评论

4. 淘宝的做法

看看淘宝在不同分辨率下,呈现的效果:

淘宝的效果跟网易的效果其实是类似的,随着分辨率的变化,页面元素的尺寸和间距都相应变化,这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前,先来了解一点关于viewport的知识,通常我们采用如下代码设置viewport:

<meta name="viewport"   content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no"
>

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width。这个device-width的计算公式为:

设备的物理分辨率/(devicePixelRatio * scale),在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio 。

devicePixelRatio称为设备像素比,每款设备的devicePixelRatio都是已知,并且不变的,目前高清屏,普遍都是2,不过还有更高的,比如2.5, 3 等,我魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置:

在devicePixelRatio为2的时候,scale为0.5

在devicePixelRatio为3的时候,scale为0.3333

这么做目的当然是为了保证页面的大小与设计稿保持一致了,比如设计稿如果是750的横向分辨率,那么实际页面的device-width,以iphone6来说,也等于750,这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下:

var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]')
.setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ',
minimum-scale=' + scale + ', user-scalable=no');

淘宝布局的第二个要点,就是html元素的font-size的计算公式,font-size = deviceWidth / 10:

接下来要解决的问题是,元素的尺寸该如何计算,比如说设计稿上某一个元素的宽为150px,换算成rem应该怎么算呢?这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的,他们用的设计稿是750的,所以html的font-size就是75,如果某个元素时150px的宽,换算成rem就是150 / 75 = 2rem。总结下淘宝的这些做法:

  • (1)动态设置viewport的scale
    var scale = 1 / devicePixelRatio;document.querySelector('meta[name="viewport"]')
    .setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ',
    minimum-scale=' + scale + ', user-scalable=no');
  • (2)动态计算html的font-size
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
  • (3)布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
  • (4)font-size可能需要额外的媒介查询,并且font-size不使用rem,这一点跟网易是一样的。

最后还有一个情况要说明,跟网易一样,淘宝也设置了一个临界点,当设备竖着时横向物理分辨率大于1080时,html的font-size就不会变化了,原因也是一样的,分辨率已经可以去访问电脑版页面了。

 

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多