javascript - 如果页面大于 div，则仅居中 div

Question

所以我在这里使用这种风格将 div 作为背景居中：

#example{
    z-index:-1; 
    width: 950px; 
    height:100%; 
    position:fixed; 
    background-color:#F0F0F0;
    background:url(images/main_background_sidebar.png) repeat-y top center;
    top: 0px;
    left: 50%;
    margin-left: -475px;
}

效果很好，它保持居中，但如果页面宽度低于 950 像素，有没有办法阻止它保持居中？例如：如果浏览器窗口只有 800px 宽，则背景图像的左侧会卡在屏幕的左侧。

Answer 1

如果您对使用 CSS3 没问题，那么您可以应用@media规则。未经检验的可能性：

#example {
   /* Don't center it. */
}
@media only screen and (min-width: 950px) and (min-device-width: 950px)  {
  #example {
   /* It's 950px or more! Let's center it! */
  }
}

只需阅读并玩它。

更新：我该如何使用它？我把它放在哪里，就在我的style.css?

媒体查询可用于标签、XML 处理指令、@import at-rule 和 @media at-rule。