水平滚动CSS

Question

我正在创建一个页面@ [链接已删除]

顶部的标题非常大（1600px）以适应宽显示器。将标题设置为 100% 宽度不起作用，因为旋转会产生一些奇怪的效果。

我将正文溢出-x 设置为隐藏，这样就不会出现水平滚动条。布局应适应正常的计算机分辨率。

问题是当您从分辨率非常小的设备（例如手机）访问时，或者如果您调整浏览器窗口的大小时。在这种情况下，水平滚动会非常有帮助，但它应该只滚动到足以看到图片，而不能再滚动。

这有道理吗？让我知道我需要澄清什么...

我尝试在正文和标题上组合 min-width 和 Overflow-x，但似乎找不到有效的解决方案。

谢谢！ 杰夫

Answer 1

使用 定位手持设备，并设置 <将手持式样式表中的 code>overflow-x 更改为 auto。或者使用 JavaScript 加载基于屏幕资源的样式表

<script type="text/javascript">
  if (screen.width < 1024) 
</script>

Answer 2

我的答案是对 0x60 答案的补充。

我建议使用 CSS 媒体查询而不是 JavaScript 来检测屏幕宽度。

例如：

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
/* Styles */
...
}

查看这些文章：

1. 标准设备的媒体查询< /a>
2. 如何使用 CSS3 媒体查询创建网站的移动版本