Question

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

view

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

@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;}    
}

我究竟做错了什么？

Answer 1

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

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

Answer 2

变化：

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

要：

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

Answer 3

删除分号应该已经修复了问题

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

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

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

如果这不能解决您的问题，请添加一个包含您问题的代码段

Answer 4

如果我正确地理解了你的问题，并且我在这里没有看到你的其余代码，那么你的响应式布局可能会由于视口的声明错误或缺失而混乱。

检查，更换或添加此项。你现在有单引号

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

详细了解here

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

media max = 480 - ＆gt;这样做直到

media max = 768 - ＆gt;如果需要更改或继续

media max = 989 - ＆gt;如果需要更改或继续

media max = 1200

Answer 5

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

Answer 6

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

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

媒体查询正在影响桌面版本，但不影响移动版本

6 个答案: