Question

我目前正在尝试设计一种适用于多种屏幕尺寸的布局。屏幕尺寸如下：

640x960的 768x1280 1024×768 1366×768 1280×800 1366×768 1280×1024

根据屏幕尺寸，我希望框内容高度适合屏幕尺寸，这样就没有垂直滚动条可用于较小的窗口或任何窗口尺寸。

我尝试了以下内容，但它似乎无法正常使用该框，高度似乎无法根据媒体队列正确调整，这会导致垂直滚动条显示;有人可以说明如何解决这个问题吗？

@media only screen and (min-width:640px) and (max-height:960px){
    .grid {
        height: 402px;     
        background:#ff3333;
    }
}
@media only screen and (min-width:768px) and (max-height:1280px) {
    .grid {
        height: 612px;     
        background:#33ff33;
        border:11px solid #33ff33 !important;
    }
}
@media only screen and (min-width:1024px) and (max-height:768px){
    .grid {
        height: 302px;     
        background: #55aaff;
        border:11px solid #55aaff !important;
    }
}
@media only screen and (min-width:1366px) and (max-height:768px){
    .grid {
        height: 329px;     
        background:#cccccc;
        border:11px solid #000000 !important;
    }
}
@media only screen and (min-width:1280px) and (max-height:800px){
        .grid {
            height: 539px;     
            background:#cccccc;
            border:11px solid pink !important;
        }
}    

 @media only screen and (min-width:1280px) and (max-height:1024){
                .gridStyle {
                    height: 539px;     
                    background:#cccccc;
                    border:11px solid yellow !important;
                }
 }

Answer 1

任何不想要垂直滚动条的原因？您只需编写基于宽度的媒体查询：

@media screen and (max-width: 640px) {

}

@media screen and (max-width: 768px) {

}

等，然后使用overflow-y: hidden;

CSS媒体查询未正确显示屏幕尺寸

1 个答案: