css - CSS：最小宽度和小屏幕

Question

在我的 CSS

body{
overflow-y:scroll;
min-width: 1024px;
}

我有什么期待？如果屏幕尺寸小于 1024 像素，那么会有横向滚动条，并且元素不会相互覆盖（1024 像素 - 最小宽度，我的网站看起来像预期的那样漂亮）。

但是当我用一些分辨率测试仪测试它时，实际上它并没有改变任何东西。

为什么？

Answer 1

您正在设置min-width. body这意味着宽度不能小于您的min-width.

您可能想要使用媒体查询。

例如：

CSS

@media only screen and (min-width: 1024px) {
    body{
        overflow-x:scroll; /* horizontal */
        /* overflow-y:scroll; */ /* vertical */
    }
}

这告诉我们窗口宽度是否小于 1024px，然后overflow-y:scroll在body.

Answer 2

对于水平滚动，您应该使用overflow-x:scroll;而不是overflow-y. 它为内容添加垂直滚动。这是一个例子，如果它会帮助你http://jsfiddle.net/sMtmD/