html - 如果我为组件设置像素，它在每台显示器上的行为是否相同？

Question

将以下内容css：

#search_bar {
  width: 300px;
  margin-left:475px;
  height:27px;
}

在每个显示器上生成与以下快照相同的搜索栏位置？

百分比单位会在每个显示器上相应地显示大小，像素是否相同？我的意思是我尝试将搜索框对齐在中心的快照中可见，但我不知道它在比我更宽的显示器上看起来是否相同。

Answer 1

显示器和屏幕分辨率都与元素的定位方式无关。重要的是视口的宽度/高度（尤其是因为桌面用户并不总是最大化他们的浏览器）。如果视口只有 300px 宽，那么您的元素不仅不会居中，而且会偏向右侧，以至于它会出现在屏幕外！如果视口是 2000 像素宽，那么它会在左边很远。

无论视口大小如何，这里有 2 个选项可以使元素完美居中。

input.one {
    display: block;
    margin: 0 auto;
    width: 300px;
}

input.two {
    width: 300px;
    margin-left: -150px; /* half of the element's width */
    position: relative;
    left: 50%;
}

http://jsfiddle.net/bGMck/

Answer 2

如果以像素为单位定位元素，则称该元素是绝对定位的。这意味着具有不同大小窗口的用户可能看不到它在屏幕中央。

您可以使用 JavaScript 在页面加载或窗口调整大小时重新定位这些居中元素：

function doResize() {
    var elem = document.getElementById('myCenterDiv');
    var ww = window.innerWidth;
    var elemWidth = elem.offsetWidth;
    elem.style.left = (ww - elemWidth) / 2;
}
window.onload = doResize;
window.onresize = doResize;

或者，您可以使用 CSS 方式：

body {
    position: relative;
}
body > #myCenterDiv {
    position: absolute;
    top: 300px;
    width: 100px;
    height: 80px;
    margin: 0 auto; /* This centers the element */
}

Answer 3

在旧的 HTML 版本中，有一个东西叫做<center>现在不存在。为了在 HTML5 中居中，在 css 中编写：

margin-left:auto;
margin-right:auto;

这将使任何对象居中。

如果你不希望它在中心，那么你可以使用Javascript：

var screen = screen.availWidth;
var gapPercent = 20;
var gap = gapPercent/screen;
document.getElementById('search_bar').style.margin-left = "gap + 'px'";

我不知道确切的代码，请。试试代码，我确定如果document.get......事情写得正确然后它会工作 - 我已经很长时间没有使用js了。