css - 只有一个 CSS 媒体查询有效

标签 css media-queries

我正在使用 CSS @media 根据屏幕分辨率调整我的网站 无论我切换到高度为 768 还是 720 的分辨率,它仍然会像我的屏幕分辨率具有 720 像素的高度一样

.group-container{
    min-width:1210px;
    max-width:70000px;
    width:1210px;
    margin-left:2.5%;
    height:87%;
    margin-top:1%;
}

@media only screen and (max-height: 768px) {
    .group-container{
        margin-top:150px;
    }
}

@media only screen and (max-height: 720px) {
    .group-container{
        margin-top:3px;
        height:90%;
    }
}

最佳答案

对于第一个媒体查询,您还应该使用 min-height 设置为 720px 和 max-height 设置为 768px

关于css - 只有一个 CSS 媒体查询有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33003945/

相关文章:

html - 媒体查询,更改左侧位置不起作用?

css - 如何在 CSS 中模拟媒体查询?

html - 页面加载时看不到整个背景高度

javascript - 从多行javascript和jquery中删除一行

javascript - 如何在移动模拟器中查看我的 HTML 网页并使我的代码更高效?

html - 媒体查询(最大宽度)在 Firefox 中无法正常工作

html - 媒体查询在本地工作,但上传到网站时不起作用

css - 覆盖 Woocommerce 的默认 CSS

javascript - Rails 4 - 嵌套表单和选择选择

css - 垂直对齐 div