移动设备上的 CSS 网页设计

Question

我是网络开发的新手。数学也很糟糕

我想知道网页上的像素如何从一种屏幕尺寸转换为另一种屏幕尺寸。比如说，我指定 左边距:50px；

如果我在我的 ipad webview 中加载这个网页，我测量它(使用标尺软件，以 px 为单位)它确实是 50px如果我在我的桌面浏览器中加载这个网页，它确实是 50px但是当在我的 iphone webview(占据整个 iphone 屏幕)中加载此网页时，它被测量为 40px，而不是我指定的 50。

1. 确定 iphone 屏幕较小，我想它需要做一些缩放……？对吗？
2. 这个转换是如何完成的？过程是什么？有某种公式吗？
3. 这对设计师意味着什么？我如何知道我应该分配的正确大小，以便布局不会在所有屏幕上中断？
4. 我通常先在大屏幕上编码，然后再看它在小屏幕上的运行情况。这是正确的方法吗？

我想为#2 找到一个好的、大的答案，有人可以帮忙吗

Answer 1

你是否覆盖了body的外边距？一些浏览器有不同的默认值。如果你查看 IE6，你会发现类似这样的内容:

“IE 6 主体的默认边距是 15px(顶部和底部)10px(左侧和右侧)”

最好有一个带有一些默认值的 css 文件来重置浏览器默认值。