媒体查询影响到桌面版本，但不是移动版本

我有一个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的页面我有这个头标记中：

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

我究竟在做什么错？

来源

2016-11-27 Abbey S

删除媒体查询中的分号......'@media（max-width：499px）{...}' – Ricky

我会投票结束这个问题，因为这是一个简单的印刷错误。 – Ricky

@Ricky我在样式的第二个声明周围移除了媒体（max-width：499px;）{}，但它没有改变任何东西。 –

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

清除我的浏览器数据解决了这个问题。感谢大家的帮助！

来源

2016-11-27 03:34:43

，你可以尝试使用 '@media屏幕'

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

来源

2016-11-27 03:08:01 letxxt

你能否详细解释一下 – Danh

这个样式@media屏幕和（min-width：200px）和（max-width：1000px） – letxxt

变化：

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

要：

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

来源

2016-11-27 03:12:34 Ricky

这也行不通。 –

卸下分号应该有固定的问题

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

由于不工作，尝试添加屏幕

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

如果不解决您的问题，然后添加一个片段与你的问题

来源

2016-11-27 03:25:12

如果我正确理解你的问题，和我出去在没有看到代码的其余部分的情况下，在你的肢体上，你的响应式布局可能由于糟糕或缺少视口声明而被搞乱。

检查，替换或在您的头部添加此项。您现在有单引号围绕它

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

了解更多关于它here

而且，与移动优先的方法来构建应用程序

媒体最大= 480 - >做，直到

媒体最大= 768 - >如果需要更改或更改

媒体最多= 989 - >如果需要更改或更改ndin

media max = 1200

来源

2016-11-27 03:30:07 LOTUSMS

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

来源

2016-11-27 03:30:24 JSON

媒体查询影响到桌面版本，但不是移动版本

回答

相关问题