不同屏幕上的CSS像素/ em单位不同

Question

我在几个月内面临同样的问题。 如果我以像素或EM单位定义任何大小或位置，则会在同一浏览器中的不同屏幕和分辨率上进行不同的翻译。

例如 - 我戴尔显示24英寸1920x1080像素，我的同事拥有戴尔24英寸老显示屏，分辨率为1600x1200像素。 问题是，同一网页的显示方式不同。 例如，当我想在没有换行符的同一行上有两个按钮并且我在CSS中设置了正确的像素宽度时，所以它在我的显示器上没有断行，它在我的同事显示器上被打破，所以我必须设置几个像素减小。 EMs也是如此。

另一个例子：

绝对位置，我使用元素的负右位置将其放在滚动条旁边。在我的电脑上它很好，在我的同事笔记本上它是可见的。

屏幕上的单位和像素大小之间有什么关系？ 如何在CSS3和HTML5 doctype中安全地编写css表，以便在所有分辨率上具有正确的兼容性？

同样的问题是按钮/文本输入，当我使用font-size和padding来设置按钮和输入的大小时。它依赖于显示分辨率看起来不同。

感谢您的帮助！

Answer 1

您必须使用相对于视口的单位，例如 vw and vh

Answer 2

em或rem相对于为当前字体定义的字体大小。你有为body定义的font-size吗？

另请阅读此http://www.w3schools.com/cssref/css_units.asp