Question

这个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分辨率宽度是什么：

enter image description here

小屏幕是什么：

enter image description here

这就是为什么我想使用宽度来获得小分辨率 - 以1024px的宽度进行页面显示，这些屏幕上的可见部分将是滚动lefr-right的分辨率

Answer 1

所以，你说的是即使你在<body>元素上设置了最小宽度为1024像素的浏览器视口比那个更窄，你的<body>元素也不会被渲染比浏览器视口宽？

奇。在Chrome 27中适用于我：

http://jsfiddle.net/87mMW/

您使用的浏览器是什么？ Media queries aren’t supported in IE ≦8, Firefox ≦3, and Safari ≦3.1

Answer 2

根据上述评论，您可以完全删除媒体查询，只需使用：

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;
}

CSS媒体选项有效，但不做任何更改

2 个答案: