如何告诉浏览器使用哪种媒体查询?

比方说,我有:

@media(max-width:800px) {
    /* Some Code */
}
@media(max-width:500px) {
    /* Some Code */
}

The browser randomly chooses one of those, If I view on 800px, it might choose the 800px css or it might choose the 500px code. If I view on 500px, it might choose the 800px css or it might choose the 500px code. I've noticed, it uses 800px more often, even if my screen size is 500px or less. And sometimes, it combines the 2. Here is a screenshot of code the browser is picking up... enter image description here

请注意,它是如何同时在两种宽度上拾取的,但是max-width:500px被划掉了?我的屏幕分辨率设置为500px。我会很感激的。谢谢。