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

Question

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

640x960768x12801024x7681366x7681280x8001366x7681280x1024

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

我尝试了以下方法，但它似乎无法在盒子上正常工作，高度似乎无法根据媒体查询正确调整，这导致垂直滚动条出现；有人可以展示如何解决这个问题吗？

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