0

这个 CSS 有效： 

@media (max-width:1023px) {
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        width:1024px;    
    }
    body{
        margin: 0;
        padding: 0;
        overflow-y:scroll;
        height: 100%;
        min-width: 1024px;
    }    
}

@media (min-width:1024px)  {
    html {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    body{
        margin: 0;
        padding: 0;
        overflow-y:scroll;
        height: 100%;
    }
}

因此，对于小分辨率，浏览器输出中有一个min-width: 1024px;选项：但这不会改变任何东西 - 仍然在小分辨率下，浏览器会尝试将整个文档置于当前分辨率限制中。

什么是 1024px 分辨率宽度：

在此处输入图像描述

什么是小屏幕：

在此处输入图像描述

这就是为什么我想将宽度用于小分辨率 - 以 1024px 的宽度显示页面，这些屏幕上的可见部分将是左右滚动的分辨率

4

2 回答 2

1

根据上面的评论，您可以完全删除媒体查询并使用它：

html {
    margin: 0;
    padding: 0;
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    overflow-y:scroll;
    height: 100%;
    width: 1024px;
}

但是，为了避免重复自己，更干净的版本如下所示：

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body{
    overflow-y:scroll;
    width: 1024px;
}
于 2013-06-22T23:32:26.650 回答
1

因此，您是说即使您<body>为比这更窄的浏览器视口设置了元素的最小宽度为 1024 像素，但您的<body>元素不会被渲染得比浏览器视口更宽？

奇怪的。在 Chrome 27 中为我工作：

你使用的是什么浏览器？IE ≦8、Firefox ≦3 和 Safari ≦3.1 不支持媒体查询。

于 2013-06-22T21:57:47.233 回答