Question

@media给了我一些问题......我似乎可以“弄清楚如何让它发挥作用。如果高度/宽度与查询匹配，我想显示滚动条。

以下是我的尝试：

.content {
    width: 600px;
    height: 600px;
    background: red;
}

@media all and (max-width: 500px) {
    body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    body{
        overflow-y: visible;    
    }
}

body {
    overflow: hidden;
}

和小提琴：http://jsfiddle.net/Ln4tg3ct/

Answer 1

要么将@media规则放在订单的最后，要么使它们更具体。例如。要么：

body {
        overflow: hidden;
    }

@media all and (max-width: 500px) {
    body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    body{
        overflow-y: visible;    
    }
}

或者

@media all and (max-width: 500px) {
    html body{
        overflow-x: visible;    
    }
}
@media all and (max-height: 500px) {
    html body{
        overflow-y: visible;    
    }
}

body {
    overflow: hidden;
}

Answer 2

确保在媒体查询之前列出您的正文样式。而不是使用visible使用scroll。在你的JSFiddle中，试试这个：

    .content {
        width: 600px;
        height: 600px;
        background: red;
    }

    body {
        overflow: hidden;
    }

    @media all and (max-width: 500px) {
        body{
            overflow-x: scroll; 
        }
    }

    @media all and (max-height: 500px) {
        body{
            overflow-y: scroll; 
        }
    }

CSS Media查询未显示/隐藏滚动条

2 个答案: