首页
Javascript
Html
Css
Node.js
Electron

移动开发

小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于

移动端的设计稿为什么是640或750px?前端对应的标准设备是什么?

2019年10月17日 发布 阅读(1247) 作者:Jerman

1、移动端为什么要设置max-width:640pxmax-width:750px

这个主要是受设计稿的影响,如果设计稿是640px,那么max-width值就设置640px,那可以设置740px吗?可以,但是因为设计稿是640px,当页面740px宽度时,图片会失真。

具体的看一下下图:

2、为什么设计稿一般是640px或750px呢?

  • 现在的设计稿一般参考iphone
  • 750px的设计稿是参考iphone6/7/8的,也就是说750px的设计稿在iphone6/7/8下可以完美显示
    iphone6/7/8的dpr比是2,所以我们做的时候要除以2
  • 640px的设计稿是参考iphone4来的,所以640px宽度的设计可以在iphone4下完美显示

当面对大中小三种屏幕需要适配的时候,很容易想到先做好一种屏幕,再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6(750px/375pt)作为基准,基于几个原因:

1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计,到320pt可能元素之间比例就不是那么回事了,比如图片和文字之间视觉比例可能失调。

2、iPhone 6 plus有两种显示模式,标准模式分辨率为1242x2208,放大模式分辨率为1125x2001(即iPhone 6的1.5倍)。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。

3、1242x2208这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率,不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率,但是大屏时代依然以小尺寸为设计基准显然不合时宜,设计师会停留在小屏的视角做设计。

所以,iPhone6的750x1334是最适合基准尺寸。

4、只交付一套设计稿,默认用什么规则来适配?

前文提到适配策略是先选择iPhone 6作为基准设计尺寸,然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话:文字流式,控件弹性,图片等比缩放。

控件弹性指的是,navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时,通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大,在垂直方向上可以显示更多内容,发挥大屏幕的优势。

按照上述默认适配规则,大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容,需要设计出特殊适配效果。比如App store首页焦点图,从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个,真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。

3、iphone6 plus的dpr比是3,那是不是设计稿要设计成1242px的宽度?

有人说,人眼最大的分辩率是750px,再大也感觉不明显。。。

参考:
https://www.zhihu.com/question/25308946

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处