移动开发之设计稿转换页面单位尺寸

Posted 2022-12-03 threenerd

在写这篇文章之前，我询问了在唯品会和腾讯的童鞋、以及公司里面前端大神（深哥），对于设计稿切图的详细方法，经过对比验证，得出设计稿转换页面单位尺寸方法步骤。我分别询问下面四个问题：

1. 设计稿的单位是什么，一般大小是什么？

2. 页面长度单位用什么，px、em、rem，还是混合，如果用rem，html的font-size是多少？

3. 设计稿转换成页面长度的方法？

4. 如果做媒体查询，合适的区间是什么？

PS：他们都已设置viewport

Q&A

--朱姐（腾讯）回答

1. 设计稿的单位是px，一般是750px。

2. px、rem混合着用，rem的html font-size用16px。

3. 750px的设计图以375px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/16px = 3.125rem。

4. 根据设备宽度不同，设置不同的html 的font-size，这个区间并没说明。

--滨神（唯品会）回答

1. 设计稿的单位是px，一般是 750px。

2. 限制用rem，rem的html font-size用312.5%（由于默认字体大小是16px，所以最终是16px * 312.5% = 50px）。

3. 750px的设计图以375px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/50px = 1rem。

4. 如果设置固定html font-size，那么就需要弄媒体查询；如果按不同设备宽度算出各自的font-size，就不用弄媒体查询。

--深哥（公司大神）回答

1. 设计稿的单位是px，一般是1080px。

2. 建议是全部使用rem及百分比的方式，rem的html font-size用100px。

3. 1080px的设计图以540px量长宽，例如设计图里有元素宽度是100px，那么得到宽度会是 100px/2/100px = 0.5rem。

4. 按不同设备宽度算出各自的font-size，如果需要兼容特殊设备（例如iPad），才要做媒体查询。如果在iPad上的效果偏大，就要修改小一点字体，一般是76px，就可以跟手机差不多保持一致的效果了。

--得出结论

1. 设计稿的单位是px（PhotoShop出来当然是这个）。

2. 没人页面长度用em。

3. 元素长宽量取是设计图里的1/2。

这三个结论还并不能得出一个好的方案。

假设

为了简化问题，做一个假设，假如世界上只有一种手机型号（恰好是iPhone6），那设计稿转换的方式是怎么样的？

（1）. 有张750px的设计稿，iPhone6的设备宽度375，取375为量取大小。

（2）. 那么设计稿里面100px，在iPhone6显示为100px / (750 /375 ) = 50px。

（3）. 规定一个html font-size值 X（例如50px），那rem值就是 (50/X) rem （例如 50px/ 50px = 1rem）

这里面可以很明显看到，font-size值并没有规定要用哪个值，它只是一个基数，元素的像素大小并不会因为这个基数有变化（所以上面问了三个人有三个不同的值，这没问题的）。也由于我们以375量取大小，所以在iPhone6上效果是与设计稿一致的。另外不是rem也是可以的（第三步不做），直接用px， 更加简单。

假设破灭

世界上当然有很多乱七八糟的机型，那如何在上面的基础上做适配？

（1）. 假如用的是px单位，又不做媒体查询做适配。那么可能在某些机型上偏大偏小，但是还能用。之所以可以这么干，是因为手机的设备宽度一般是在320-470之间，与375产生的偏差效果并不会很大，当然偏差越大差异越大。

（2）. 假如用的是px单位，媒体查询做适配。虽然这么做能适配机型，让效果看起来都差不多，但是做起来应该很痛苦，每个固定长度的元素都要写一遍，这会是很要命的吧。

（3）. 假如用的是rem单位，不动态计算font-size值，不做媒体查询。我靠，那这不是跟第一种情况一样。

（4）. 假如用的是rem单位，动态计算font-size值。计算方式如下：

var baseSize = 50, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize).toFixed(2) ; //这个就是动态font-size值

这里我有一点没有说是， 这个计算公式是viewport设置initial-scale=1的情况，如果是其他缩放比例，那就需要乘以这个缩放比例。

例如：https://m.taobao.com/（淘宝移动版）

其viewport：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

其fontsize计算方式：

var baseSize = 75, // 基数
    baseWidth = 375, //量取值大小
    fontSize =  (document.documentElement.clientWidth / baseWidth * baseSize * 0.5 ).toFixed(2) ; 

这里面关键的是那个375的基础量取值，当取375时，页面效果在设备宽度为375就必须显示正常，这个是很关键的约定。

（5）. 假如用的是rem单位，媒体查询做适配。 在各个媒体查询的区间设置适当的font-size，没什么特别的。

最终方案

根据上面的情况，我觉得转换的方式可以用下面步骤。

（1）. 设计稿应有约定的大小（例750px），选取一个手机的设备宽度做量取大小值（例375）。

（2）. 限制使用rem，选取一个font-size值作为的基数。

（3）. 计算每个元素的rem值，进行界面开发。

（4）. js计算当前设备宽度的fontSize，并设置回html元素上。（适配步骤）

（5）. 媒体查询作为补救措施，特殊设备宽度设置特殊的font-size。（这步不是必须的）

注意

（1）. px可以用，但是当心效果会偏大或偏小，元素可能还会往下掉。

（2）. 界面开发时只针对iPhone6（375pt）一种机型，页面完成后，才做适配步骤。

（3）. 设计师可能会输出标注图（750px）和@3x切图（1125px）两种图。用@3x切图的设计稿切图，在超清屏幕才能清晰；标注图可用来计算元素长宽；但是设计师可能为了简单，就只输出一种视觉图，就如文章开头说的750px、1080px。

（4）. 使用sass或less可以让代码写得直观、简单。

例如：

padding: rem(5) rem(15) 0 rem(15);

这样尺寸都是对应的设计稿的尺寸，开发人员就不用关心里面的实现细节了。

总结

设计稿转换页面单位尺寸，简单做就是——先针对某个机型做，再做适配。

src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510"> src="http://player.youku.com/embed/XNzkxMTc3OTM2" allowfullscreen="" frameborder="0" height="498" width="510">