html - 媒体查询影响桌面版本，但不影响移动版本

Question

我有一个 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"'>

我究竟做错了什么？

Answer 1

改变:

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

收件人:

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