Question

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

我需要告诉所有小型显示器屏幕使用overflow-x：scroll。

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

overflow-x：hidden！important;

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

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

我会一直在寻找一个能够做到这一点的css片段，但是我发布这个是因为该网站刚刚上线并且它即将受到大量流量的影响，所以我需要一些快速的东西。

Answer 1

我很快就找到了答案（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没有显示滚动条（我不确定这是他们的限制还是我自己的限制。）

媒体查询小屏幕的CSS

1 个答案: