CSS 像素/em 单位在不同屏幕上不同答案

【问题标题】：CSS pixels / em units diffent on diffent screensCSS 像素/em 单位在不同屏幕上不同
【发布时间】：2017-04-05 21:47:20
【问题描述】：

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

例如 - 我有 24 英寸 1920x1080 像素的戴尔显示器，而我的同事有 24 英寸旧款戴尔显示器，分辨率为 1600x1200 像素。问题是，同一个网页的显示方式不同。例如，当我想让两个按钮在同一行没有换行时，我在 CSS 中设置了适当的像素宽度，所以它在我的显示器上没有断行，在我同事的显示器上它是断行的，所以我必须设置几个像素更小。这同样适用于新兴市场。

另一个例子：

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

屏幕上的单位和像素大小有什么关系？我怎样才能安全地用 CSS3 和 HTML5 doctype 编写 css 表以在所有分辨率上都具有正确的兼容性？

同样的问题是按钮/文本输入，当我只使用字体大小和填充来设置按钮和输入的大小时。取决于显示器的分辨率，它看起来会有所不同。

感谢您的帮助！

【问题讨论】：

标签： css screen pixels units-of-measurement

【解决方案1】：

em 或rem 与为当前字体定义的字体大小相关。你有为正文定义的字体大小吗？

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

【讨论】：

所以最好的做法是使用 body 像素大小的字体大小，然后对所有位置、大小、边距、填充使用 em 单位或 rem 单位？
我只是说，如果你有自己的 css，你需要以 px 为单位定义 body 的字体大小，否则如果你有 Bootstrap 或 Foundation，请记住它们定义了 16px 的默认字体-size 所以 1em/1rem 将是 16px。
所以，如果我理解 - 使用非相对单位不好，因为有多种方式，不同的设备如何计算绝对像素单位，所以使用相对单位能够在不同的设备/屏幕上获得相同的结果并正确计算相对单位，将字体大小（以像素为单位）定义为根元素的默认值很重要。 Rem 单位是相对于父元素的，而不是整个页面的根元素。提到 bootstrap 也是一种启发。

【解决方案2】：

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

【讨论】：