媒体查询影响桌面版，但不影响移动版答案

【问题标题】：Media Queries are affecting the desktop version, but not the mobile version媒体查询影响桌面版，但不影响移动版
【发布时间】：2016-11-27 11:36:42
【问题描述】：

我有一个 CSS 媒体查询，但它似乎混淆了，我不知道为什么。它使桌面版看起来像我想要的移动版，移动版看起来像我想要的桌面。这是有问题的css页面：

@media (min-width: 500px;) {
    body{background-image:url(ollivanderbackground.jpg);color:#FFFF66;}
    .navigation{color:#FFFF99; border:dotted medium #FFFF99; width: 35%;}
    a:hover{color: #FFFFCC;} 
    a:visited{color: #FFFF1A;}  
} 
@media (max-width: 499px;) {
    .navigation{width: 100%;}
    .bio{display: none;}    
}

在页面的 HTML 中，我在 head 标签中有这个：

<'meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"'>

我到底做错了什么？

【问题讨论】：

从您的媒体查询中删除分号...@media (max-width: 499px) { ... }
我会投票结束这个问题，因为这是一个简单的印刷错误。
@Ricky 我删除了第二个样式声明周围的媒体 (max-width: 499px;){ } 但它没有改变任何东西。
删除; 分号，而不是媒体查询本身。

标签： html css mobile media-queries

【解决方案1】：

变化：

@media (min-width: 500px;) { ... } 
@media (max-width: 499px;) { ... }

收件人：

@media (min-width: 500px) { ... } 
@media (max-width: 499px) { ... }

【讨论】：

【解决方案2】：

你可以尝试使用'@media screen'

@media screen and (min-width:200px) and (max-width:1000px)

【讨论】：

你能解释得详细一点吗
试试这个样式@media screen and (min-width:200px) and (max-width:1000px)

【解决方案3】：

html中的单引号是否正确？这会导致问题吗？

【讨论】：

【解决方案4】：

删除分号应该可以解决问题

@media (min-width: 500px) { ... }
@media (max-width: 499px) { ... }

由于这不起作用，请尝试添加屏幕

@media screen and (min-width: 500px) { ... }
@media screen and (max-width: 499px) { ... }

如果这不能解决您的问题，请在您的问题中添加一个 sn-p

【讨论】：

【解决方案5】：

我想通了。事实证明，我的浏览器历史记录真的被阻塞了，并且正在加载旧版本的网站，同时试图将它与新的 CSS 混合，事情变得非常混乱和奇怪。

清除我的浏览器数据解决了这个问题。感谢大家的有益尝试！

【讨论】：

【解决方案6】：

如果我正确理解了您的问题，并且在没有看到您的其余代码的情况下在这里走神，您的响应式布局可能由于视口声明错误或缺失而被搞砸了。

在您的脑海中检查、替换或添加它。你目前有单引号

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

阅读更多关于它的信息here

此外，使用移动优先的方法构建您的应用程序

媒体最大值 = 480 --> 这样做直到

media max = 768 --> 如果需要更改或继续更改

media max = 989 --> 如果需要更改或继续更改

媒体最大值 = 1200

【讨论】：