前端 - 一个移动web页面480x800的psd,如何切图才能在480x800等手机上正常显示?
高洛峰
高洛峰 2017-04-17 11:50:21
[Android讨论组]

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
怪我咯

这个我来回答下好了。

一般移动端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(你图片的一般宽)

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

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

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

怪我咯

网页从开始到现在,它的目的一直就是为了展示文档,它关系的不是平面设计,而是排版,这一点要和设计师沟通好。
网页设计中要考虑到哪些元素是固定宽度的,哪些是元素是可变宽度的。
比如google的首页,最上面一条“硬又黑”,两边的文字区域是固定宽度的,中间黑色空白是可变宽度的。
中间区域,logo和搜索框是固定宽度且剧中的,左右留白。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号