我正在为移动设备（主要是iPhone和Android）开发webapps。但是css px不是设备px，它取决于window.devicePixelRatio（iPhone4S为2）。我们的设计师总是根据640 x 960（iPhone4S屏幕）的屏幕进行设计。所以我在我的CSS中使用的大小是设计中指定的一半。当涉及1个设备px边界时，css中的0.5px意味着没有边框。我在搜索网页后发现2个解决方案（box-shadow和border-image）实现了1个retina px边框，但实现起来很难看。
所以我在视口中将初始比例设置为0.5，现在我的css中的大小与网页设计相同，并且实现了1个视网膜px边框。
这是一个好习惯吗？
答案 0 :(得分：1)
如果您想要使用该页面的唯一设备是iPhone 4/5，那么这应该几乎完全正常。
但是，如果您的公司正在寻找具有响应性的页面（适合多个分辨率的多个屏幕），那么该公司的出发点应该是接受这些设计无法与现实世界相匹配（或者必须有更多他们在不同的决议下制作了......）
技术起点是设置
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0">
有时可能有理由使用其他设置，但通常情况下，这是起点。
它表示您应该使用设备浏览器的CSS像素作为设备的宽度，并将初始缩放设置为100％宽度，并将最小缩放（“缩小”）设置为100％宽度。 / p>
当你进入数学时，原因很简单;
iPhone 4/5的宽度为640px，CSS宽度为320px
这是640设计的50％宽度（2：1点/ px比率）...
...但是Galaxy S4有一个1080px的屏幕，宽度为360px（比例为33.3％，3：1）。
那么您将比例设置为0.5还是0.333？
也许在某些情况下这很重要，因为桌面网站目前是如何制作的，并且它不能超过某个最小宽度。
但是在寻求自适应的典型设计中，您可以从设备开始决定它应该有多宽，并且您的设计尽可能适应该宽度。
同样，这通常意味着使用百分比或em / rem对对象的宽度进行响应式设计，在媒体查询中使用断点来定位不同的布局设计。
所以你可能会让设计师在320到320-480的设计，一个480px到640px等设计...... ......或者你可能只是拥有越来越小的视图，一旦你比iPad更薄。
这完全取决于您，您的设计师和您的公司 但至少，这是项目经常开始的方式，也是他们背后的理念。