CSS3 媒体查询未被提取

标签 css responsive-design media-queries

我刚刚进入媒体查询,但第一个问题让我发疯,我花了几个小时在上面。

我试过以下:

@media screen and (max-device-width: 480px) {
    div.logothingy {
        z-index: 100;
        display:none !important;
    }
}
@media (max-device-width: 480px) {
    div.logothingy {
        z-index: 100;
        display:none !important;
    }
}
@media screen and (max-width: 480px) {
    div.logothingy {
        z-index: 100;
        display:none !important;
    }
}

我将它加载到我的头文件的末尾,当我在 firebug 中查看它时,它就在那里。

然后我转到对象 .logothingy,当我将窗口尺寸缩小到很小时,它甚至没有获得样式。也就是说它甚至没有得到它然后被覆盖,它只是根本没有得到它。发疯了。请帮忙。

好吧,我什至这样做了:

.logothingy {
border:1px solid;
}
@media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}

它只是放置边框而不是其余部分。 我脑子里有这个

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

更新 2:我将其更改为 780px 并且它可以工作,但是当它为 480px 时,它可以在没有获得样式的情况下一直缩小到零。

最佳答案

我有同样的戏剧并且注意到我错过了这个:

<meta name="viewport" content="width=device-width">

在我的索引页的头部。添加它,媒体查询全部启动。

关于CSS3 媒体查询未被提取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12863160/

相关文章:

c# - 母版页和默认页

html - 两个div之间的间距问题

jquery - 无需滚动即可在任何浏览器屏幕尺寸中设置设计

css - @viewport、@media 和 LESS

css - 宽高比媒体查询的正确值是多少?

javascript - ASP.NET:为 https 发布网站

html - Bootstrap- Left Columns 展开时使右列向下移动

css - 使用媒体查询时保持 SVG 居中

CSS + <img> webkit 使用 % 实现

html - 使 div 内容响应