如何使 css 元素在不同分辨率下出现在同一个位置，以及屏幕调整大小答案

【问题标题】：How to make css elements appear the same place on different resolutions, and screen resize如何使 css 元素在不同分辨率下出现在同一个位置，以及屏幕调整大小
【发布时间】：2014-07-14 23:41:18
【问题描述】：

我正在使用这个简单的 css，但元素会随着屏幕大小的调整而移动，并区分显示器分辨率。

.header {
 position: fixed;
 top: 15px;
 left: 20px;
}

【问题讨论】：

查看媒体查询。
"同一个地方" - 与什么有关？显示器的边缘，视口..？因为相对于应该工作的视口，虽然分辨率变化会导致“像素大小”（某种程度）变化（所以是的：媒体查询）。
How to deal with different screen resolutions in CSS?的可能重复
“同一个地方”的意思是，在宽屏上它在页面中间，在旧屏幕上它在右侧。

标签： css

【解决方案1】：

我认为您正在寻找 em 单位而不是像素。

.header {
    position: fixed;
    top: 15em;
    left: 20em;
}

1 em 是默认字体的高度。由浏览器定义。

根据您对问题的评论，我想补充一点，您可能应该看看 display:flex 布局属性，或者只是了解如何将 a(n) (div-) 元素的内容居中。

【讨论】：

【解决方案2】：

回应您的评论“'同一个地方'意味着，在宽屏上它在页面中间，在旧屏幕上它在右侧。”（我无法评论）

我不明白你想要它在哪里。如果要在页面调整大小时让它看起来与页面左侧的距离相同，请使用 left: some%;

【讨论】：