css 媒体查询问题 @media

// 小于等于 1366px 宽度的屏幕全都适应
@media only screen and (max-width: 1366px) {
    .div{ height: 14rem !important;}
}


// 大于 1600px 宽度屏幕的全都适应
@media only screen and (min-width: 1600px) {
    .div{ height: 20rem;}
}

// 大于1366px - 1600px 之间的宽度屏幕
@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .div{ height: 20rem;}
}

媒体查询需要注意的是， 其中的 width 或者 height 指的是当前 html 的大小 ， 不是我们电脑的分辨率。

举例： 页面中嵌入iframe， iframe 中的 某个div需要设置媒体查询，但是该iframe 不是浏览器的宽高，就该使用具体的iframe 的html 的宽高去设置媒体查询。