首页 > 开发 > HTML > 正文

一个移动web页面480x800的psd,如何切图才能在480x800等手机上正常显示?

2017-09-09 13:57:26  来源: 网友分享

本人是移动web app的菜鸟,拿到psd之前进行切图,切图标准是什么。
可以的话,大概讲讲移动web开发需要注意的东西。
我也不知道我问得对不对啊。。。

解决方案

这个我来回答下好了。

一般移动端web页面的设计规范是 640px 宽的 psd 设计稿, 因为现在主流的手机分辨率都是640 如iphone

当然这个是设计规范。

你在做web页面的时候。

一般的做法是设置 html 页面的 viewport 信息为 device-width。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"  />

这个时候会有一个很有意思的情况就是 web中的你获取document 宽度的时候它是显示320(如iphone)。
也就是说你做的所有东西尺寸都是设计稿的一半尺寸就可以了。

一些背景图设置,要设置bacground-size 如果你懂css的话。

bacground-size: 50% auto(你图片的一般宽)

另外适应不同宽度屏幕,你的页面最好是做自适应宽度的布局。

其他没了,可以多参考一些大站移动端页面。

最后一句:
作为程序员,要养成习惯,不懂先搜索,多看别人的代码,再思考,最后再提问。