响应式设计，媒体查询不切换

Question

下午好，

我正在尝试建立一个我的网站响应，但我不能让它工作。我一直在谷歌上搜索大约一个小时或三小时，我几乎可以肯定我没有做错，但它不起作用。

这是我的代码：

@media screen and (min-width: 1230px) { 
}

@media screen and (min-width: 750px) and (max-width: 1229px) {

    body{
    display: none;
    }
}

我能最好地描述问题的最佳方式是，当我使用全屏浏览器访问我的网站时，它通常像我想要的那样加载，但是当我缩小窗口时，它应该加载css的其他部分，但只是没有＆＃39 ; t加载任何CSS。我在那里推出了display：none，以便页面是白色的，看它是否有效。

我有 <meta name="viewport" content="width=device-width" /> 在我的HTML中。

网站的网址：http://www.biebvragen.nl

Answer 1

不确定是否允许回答我自己的问题，但它现在有效！

而不是：

@media screen and (min-width: 1230px) { 
}

@media screen and (min-width: 750px) and (max-width: 1229px) {

body{
display: none;
}
}

我把它改为：

@media screen and (min-width: 750px) and (max-width: 1229px) {

body{
display: none;
}
}
@media screen and (min-width: 1230px) { 
}

现在似乎工作正常！

Answer 2

它适用于我的linux上的iceweasel，尝试使用其他浏览器或执行Ctrl + F5刷新。

也许清理缓存也是解决方案，但是您的代码运行良好，不是css问题，或者它也不应该在我的浏览器上运行。