响应式CSS不起作用,但工作中途

时间:2015-03-07 16:36:11

标签: css html5 responsive-design

大家好,我的响应式CSS问题。它工作正常,最大宽度: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;
    }


}

1 个答案:

答案 0 :(得分:0)

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

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