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

Question

I am currently trying to design a layout which will work for multiple screen sizes. The screen sizes are listed below:

640x960 768x1280 1024x768 1366x768 1280x800 1366x768 1280x1024

Based on the screen sizes, I want the box content height to fit within the screen size, so that there is no vertical scrollbar for a smaller window or any window sizes.

I tried the following, but it doesn't seem to be working correctly for the box, the height doesnt seem to adjust correctly based on the media queires, which is causeing the vertical scrollbar to show up; can someone show how this can be fixed?

@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

Any reason for not wanting a vertical scrollbar? You can just write a width based media query:

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

}

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

}

etc, and then use overflow-y: hidden;