这是一个创建于 3410 天前的主题，其中的信息可能已经有所发展或是发生改变。
大家好，本人前端新手一枚（其实是招不到前端，只能我硬着头皮上了..），最近做一套手机网站的页面，设计师给的PSD稿件是1330*750大小的，我就照着PSD上的像素切图做网页了，比如PSD上顶部是80px，然后我CSS中写的也是80px，结果放到手机上看的时候不忍直视，没办法只能用initial-scale=0.5临时解决一下，然后去Google上找了一下device pixel ratio相关的知识，但是还是没太理解..
现在想问一下，如果meta中写initial-scale=1.0，PSD稿件中的像素和CSS中的像素应该怎样换算呢？
现在想问一下，如果meta中写initial-scale=1.0，PSD稿件中的像素和CSS中的像素应该怎样换算呢？
第 1 条附言 · 2015-07-25 16:33:01 +08:00
设计师给的PSD稿是按照iPhone 6的尺寸设计的（750*1334），我现在把PSD稿件上的像素除以2，再写到CSS中，可以正常显示，暂时只能先这样写着吧。
Ps：项目组招不到前端就拿一个Java工程师做前端，真是X了狗了....
Ps：项目组招不到前端就拿一个Java工程师做前端，真是X了狗了....
 |
1
jokcy 2015-07-25 13:31:46 +08:00
手机上是根据你的scale比例会以不同数量的像素去显示网页上的一个像素点。这在使用css的px时其实显示是正常，因为这本来就是浏览器来渲染的。但是图片就不一样了，它本来就是用像素来表示的，所以如果你用多个像素去显示图片上的一个像素点，那么肯定模糊了。解决方法就是80px的图比如可以用40px来表示，具体比例你可以参照dpi和px的换算来算
|
 |
2
acrisliu OP @jokcy 这样子的话，不同设备的dpi不一样，那么CSS中的px能写死么？写死的话怎么适应不同的设备呢？
另外，以顶部导航为例，PSD稿件中80PX的高度看起来很正常，但是放到手机上以后，80PX显得太高了，不是图片的话比例也和PSD中不一样哦。 |
|
3
jokcy 2015-07-25 13:41:56 +08:00
@acrisliu 那肯定的，你要看你们设计师按照多少分辨率来做得。一般他们都是按照iphone来做的话我们都是除以二的。有时候你也可以自己做一些调整，毕竟现在分辨率太多。
|
 |
5
anthozoan77 2015-07-25 14:29:41 +08:00
先收藏，持续关注~
|
 |
6
learnshare 2015-07-25 15:08:47 +08:00  1
一般来说，需要设计给 2x/4x 的图，然后前端按比例缩放后来做。对于非整数比的设计图，你自己定义一个缩放比例来处理就好了。比如 80px 可以写成 36px 的高度，那比例就是 80/36
|
 |
7
hahasong 2015-07-26 00:36:12 +08:00
meta里禁止缩放，结合 媒体查询设置根默认字体大小，全部用相对单位rem。图片用相对宽度
|
Select Language