css - 响应式 CSS 不工作但工作一半

Question

大家好，我的响应式 CSS 有问题。它在 max-width:321px 下工作正常，但当我尝试执行 max-width:500px 时却不行。我试图理解为什么以及我做错了什么。请帮助...

/*/Mobile MAINCSS/*/

img {

    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 320px) {

    /*/Nav and Header/*/

    iframe {

        width: 100%;
        height: 700px;
    }

    body {

        color: red;
    }

    #nav {

        display: none;
        width: 100%;
    }

    #logomain {

        width: 100%;
        height: auto;
        display: none;
    }

        .logo {

            display: none;
        }

        .logoright {

            display: none;
        }

    .mobile-number {

        display: block;
        text-align: center;
        background:#333399;
    }

    .mobile-number a:link {

        color: red;
        text-decoration: none;
    }

    .mobile-number a:visited {

        color: red;
        text-decoration: none;
    }

    #head_wrap {

        width: 100%;
        height: auto;
    }

    #head {

        width: 100%;
        height: auto;
    }

    /*/Mobile Navigation/*/

    #mobilenav {

        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
        background: #333399;
        color: white;
        font-size: 18px;
        text-align: center;

    }

    .mobile ul {

        display: inline;
        margin: 0 auto;
        width: 100%;
        height: auto;
    }

    .mobile ul li {

        display: inline-block;
        padding: 10px;

    }

    .mobile a:link {

        color: white;
        text-decoration: none;
        font-weight: bold;
        text-shadow: 1px 1px 1px black;
        border-radius: 5px 5px 5px 5px;
        padding: 5px;
    }

    .mobile a:visited {

        color: white;
    }

}

    /*/Content/*/

    #content {

        width: 100%;
        height: auto;
    }

    #content_wrapper {

        width: 100%;
        height: auto;
    }

    #bizmain {

        width: 100%;
        height: auto;

    }

    .bizexpress {

        float: none;

    }

    .bizpro {

        float: none;

    }

    .pro {

        float: none;

    }
    /*/Footer/*/


    #footer {

        width: 100%;
        height: auto;
    }

        /*/Additional Updates 02/28/2015/*/

    .main-right {

        width: 100%;
        height: auto;
        text-align: center;
    }

    .main-left {

        width: 100%;
        height: auto;
        float: none;
        text-align: center;
    }

    .form {

        width: 100%;
        height: auto;

    }

    .form-control {

        width: 50%;
    }

    .input-group-addon {

        font-size: inherit;
    }

    /*/Website Design/*/

    .evoke {

        width: 100%;
        height: auto;
    }

    .evokeemotions {

        width: 100%;
        height: auto;
    }

        .resource1 {

        float: none;
        text-align: center;
    }

    .resource2 {

        float: none;
        text-align: center;
    }

    .resource3 {

        float: none;
        text-align: center;
    }


}

Answer 1

@media screen and (max-width: 500px) 
{
}
@media screen and (max-width: 320px) 
{
}

你是对的，没问题。将 500px Css 放在 300px 之上