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

Question

将以下 css :

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

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

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

Answer 1

无论是显示器还是屏幕分辨率都与元素的定位方式没有任何关系。重要的是视口(viewport)的宽度/高度(特别是因为桌面用户并不总是最大化他们的浏览器)。如果视口(viewport)只有 300px 宽，你的元素不仅不会居中，而且会太靠右以至于会出现在屏幕之外!如果视口(viewport)的宽度为 2000 像素，它会非常靠左。

无论视口(viewport)大小如何，这里有 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/