只有一个CSS媒体查询正在工作

我使用CSS @media来调整我的网站，具体取决于屏幕分辨率无论我切换到高度为768还是720的分辨率，它仍会像我是我一样屏幕分辨率为720像素只有一个CSS媒体查询正在工作

.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%; 
    } 
}

来源

2015-10-07 Jonattan Davelaar

正常显示和第二个媒体查询的小'margin-top'值似乎导致相同的输出，并且您使用了第一个媒体查询的更大的顶部边距。您是否期望在正常视图（≥768）内看到更大的顶部边距？ –

一个高度，你应该使用也是最小高度设置为720像素和最大高度设置为768px

来源

2015-10-07 23:17:05

仍然有相同的问题，除了现在我改用720或768px它一直显示的结果，如果我的分辨率高度是768px –

与第一媒体查询，如果您尝试使用（MAX-宽度：... px）呢？

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

这样你就不会依赖你的身高，而是依赖你的身高，但是窗口的宽度正在被显示。例如：

您的分辨率是900x1600。

调整窗口的高度不会有太大的影响。如果你在哪里使用最大宽度，那么例如，如果你调整到600x1200，它会有更多的效果。

编辑：我认为你应该使用的原因是，当它提到响应式设计时，高度并不重要。高度可能会改变，但它总是可以滚动的，所以使用高度几乎没有效果。

设备的宽度是否重要，宽度对于响应式设计（假设您的网站不水平滚动）非常重要。根据显示宽度创建查询会更好，然后依赖于高度来解决这个问题。

来源

2015-10-08 08:16:53

我的网站滚动水平滚动，所以是高度无关紧要 –

只有一个CSS媒体查询正在工作

回答

相关问题