1

问题：如何使用 css @media 来定位 1024x600 以下的所有屏幕？

我需要告诉所有的小屏幕使用overflow-x:scroll。

上下文：我必须在 HTML 和 BODY 标签上使用以下 CSS 规则：

溢出-x：隐藏！重要；

（否则某些动画会导致页面上出现难看的水平滚动条。）

但是现在，当使用较小的屏幕查看我的网站时，如果用户可以水平滚动页面会很好。

我会继续寻找一个可以做到这一点的css片段，但我发布这个是因为该网站刚刚上线并且即将受到大量流量的打击，所以我需要一些快速的东西。

4

1 回答 1

2

我很快就找到了答案（http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml），但我仍然需要弄清楚如何在线测试。

/* CSS that's applied when the viewing area's width is 800px or less */
@media screen and (max-width: 800px){
  html{
  overflow-x:auto !important;
  }
  body{
  overflow-x:auto !important;
  }
}

去哪里测试这是否真的有效，因为 testsize.com 没有显示滚动条（我不确定这是他们的限制还是我自己的限制）。

于 2012-11-21T10:31:15.667 回答