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

[acrisliu]

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

现在想问一下，如果meta中写initial-scale=1.0，PSD稿件中的像素和CSS中的像素应该怎样换算呢？

[jokcy]

手机上是根据你的scale比例会以不同数量的像素去显示网页上的一个像素点。这在使用css的px时其实显示是正常，因为这本来就是浏览器来渲染的。但是图片就不一样了，它本来就是用像素来表示的，所以如果你用多个像素去显示图片上的一个像素点，那么肯定模糊了。解决方法就是80px的图比如可以用40px来表示，具体比例你可以参照dpi和px的换算来算

[acrisliu]

@jokcy 这样子的话，不同设备的dpi不一样，那么CSS中的px能写死么？写死的话怎么适应不同的设备呢？

另外，以顶部导航为例，PSD稿件中80PX的高度看起来很正常，但是放到手机上以后，80PX显得太高了，不是图片的话比例也和PSD中不一样哦。

[jokcy]

@acrisliu 那肯定的，你要看你们设计师按照多少分辨率来做得。一般他们都是按照iphone来做的话我们都是除以二的。有时候你也可以自己做一些调整，毕竟现在分辨率太多。

[acrisliu]

@jokcy 嗯嗯 现在我先除以2吧 谢谢

[anthozoan77]

先收藏，持续关注~

[learnshare]

一般来说，需要设计给 2x/4x 的图，然后前端按比例缩放后来做。对于非整数比的设计图，你自己定义一个缩放比例来处理就好了。比如 80px 可以写成 36px 的高度，那比例就是 80/36

[hahasong]

meta里禁止缩放，结合 媒体查询设置根默认字体大小，全部用相对单位rem。图片用相对宽度