我目前正在使用Photoshop，为未来的网站设计创建一系列线框。当然，我希望网站能够做出回应;这将由Bootstrap帮助。
我将首先使用智能手机屏幕尺寸，然后相应地放大屏幕尺寸。
据Bootstrap称，智能手机通常介于480px到767px之间。不可否认，后者更多是基于平板电脑的。
我有点不确定的是，当我查看手机规格时，物理屏幕宽度远大于CSS宽度。
我们来看看HTC One手机吧。 CSS屏幕尺寸为360px×640px，而物理屏幕宽度为1080px×1920px。参考宽度，这表明物理屏幕宽度是网站CSS宽度的3倍宽度。看了几个网站，在HTC One上，网站的宽度肯定不比实际屏幕的物理宽度小3倍。
我只是想知道我是否在这里误解了一些东西。例如，在测量物理屏幕时，像素的大小可能不同。
答案 0 :(得分：1)
CSS宽度是浏览器/ css使用的内容。
物理宽度告诉您物理屏幕在每个css像素中包含多少像素，即现代高密度屏幕可以在每个css像素中包含2x或3x像素。关键字＆＃34;视网膜＆＃34;屏幕。
如果将1080px（物理）除以360px（css），则会得到3.这意味着与普通的老式屏幕相比，此屏幕的像素密度是3倍。
后果：该设备的图像需要比正常的css大小大3倍才能在该设备上显得清晰（而且不模糊）。
因此，为了Photoshop线框图，您只想使用css宽度。但是在以后创建实际图像时，您可能希望它们具有3种不同的尺寸：
1）正常（与css宽度相同）
2）2倍像素密度的屏幕大2倍
3）3倍像素密度的屏幕大3倍。
编辑：
这是一段惊人的慢动作视频，展示了在高密度屏幕上发生了什么。观察每个像素不仅包含3个不同颜色的像素，还包括每个颜色像素如何由多个物理像素组成：https://youtu.be/3BJU2drrtCM?t=7m30s
答案 1 :(得分：0)
在发布像素密度非常高的设备时，市场上的所有软件/网站都会变得太小而且不可读，所以没有人会购买这些设备。供应商引入了逻辑像素，因此现有网站将照常渲染，但由于物理像素小于逻辑，因此字体和矢量图标看起来更加平滑。