前端新手,问一下移动开发和切图相关的问题

2015-07-25 13:21:36 +08:00
 acrisliu
大家好,本人前端新手一枚(其实是招不到前端,只能我硬着头皮上了..),最近做一套手机网站的页面,设计师给的PSD稿件是1330*750大小的,我就照着PSD上的像素切图做网页了,比如PSD上顶部是80px,然后我CSS中写的也是80px,结果放到手机上看的时候不忍直视,没办法只能用initial-scale=0.5临时解决一下,然后去Google上找了一下device pixel ratio相关的知识,但是还是没太理解..

现在想问一下,如果meta中写initial-scale=1.0,PSD稿件中的像素和CSS中的像素应该怎样换算呢?
1566 次点击
所在节点    问与答
7 条回复
jokcy
2015-07-25 13:31:46 +08:00
手机上是根据你的scale比例会以不同数量的像素去显示网页上的一个像素点。这在使用css的px时其实显示是正常,因为这本来就是浏览器来渲染的。但是图片就不一样了,它本来就是用像素来表示的,所以如果你用多个像素去显示图片上的一个像素点,那么肯定模糊了。解决方法就是80px的图比如可以用40px来表示,具体比例你可以参照dpi和px的换算来算
acrisliu
2015-07-25 13:35:20 +08:00
@jokcy 这样子的话,不同设备的dpi不一样,那么CSS中的px能写死么?写死的话怎么适应不同的设备呢?

另外,以顶部导航为例,PSD稿件中80PX的高度看起来很正常,但是放到手机上以后,80PX显得太高了,不是图片的话比例也和PSD中不一样哦。
jokcy
2015-07-25 13:41:56 +08:00
@acrisliu 那肯定的,你要看你们设计师按照多少分辨率来做得。一般他们都是按照iphone来做的话我们都是除以二的。有时候你也可以自己做一些调整,毕竟现在分辨率太多。
acrisliu
2015-07-25 13:43:27 +08:00
@jokcy 嗯嗯 现在我先除以2吧 谢谢
anthozoan77
2015-07-25 14:29:41 +08:00
先收藏,持续关注~
learnshare
2015-07-25 15:08:47 +08:00
一般来说,需要设计给 2x/4x 的图,然后前端按比例缩放后来做。对于非整数比的设计图,你自己定义一个缩放比例来处理就好了。比如 80px 可以写成 36px 的高度,那比例就是 80/36
hahasong
2015-07-26 00:36:12 +08:00
meta里禁止缩放,结合 媒体查询设置根默认字体大小,全部用相对单位rem。图片用相对宽度

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/208240

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX