1

メディア クエリを使用してさまざまなデバイスで CSS を変更していますが、2 番目のメディア クエリ (最大幅: 767) を変更すると、モバイルの CSS が上書きされます。それがなぜなのか、誰にも分かりますか？

CSSは次のとおりです。

/* Mobile */

@media only screen and (min-width: 320px) and (max-width: 480px) {
  /* Style adjustments for viewports 480px and under go here */
    .row {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 98% !important;
        padding-left: 1% !important;
        padding-right: 1% !important;
    }

    span {
        letter-spacing: 20px !important;
    }

    .nav li {
        margin-right: 22px !important;
        text-align: center !important;
        letter-spacing: 2px !important;
    }

    ul li:last-child { 
        margin-right: 0px !important; 
    }

    .intro h1 {
        font-size: 44px !important;
        margin-bottom: -40px !important;
    }

    .intro img {
        visibility: hidden !important;
    }

    .dotted_line {
        visibility: hidden !important;
    }

    .cta {
        height: 450px !important;
        width: 330px !important;
        margin-top: -30px !important;
        margin-bottom: -250px !important;
    }

    .cta h2 {
        font-size: 20px !important;
        margin-left: 5px !important;
        margin-top: -10px !important;
    }

    .cta p {
        font-size: 16px !important;
        margin-left: 5px !important;
        margin-top: -10px !important;
    }

    .home_form {
        margin-left: 20px !important;
    }

    .left input {
        width: 280px !important;
        margin-bottom: 10px !important;
    }

    .right {
        width: 280px !important;
        float: none !important;
    }

    .right textarea {
        height: 120px !important;
        width: 285px !important;
    }

    .submit {
        background: url('../img/submit_btn.png') no-repeat !important;
        float: left !important;
        margin-top: 20px !important;
    }

    .social {
        visibility: hidden !important;
    }

    .social_icons {
        margin-right: auto;
        margin-left: auto;
    }

    footer .left p {
        width: 330px !important;
    }

    footer .middle {
        visibility: hidden;
    }

    footer .right {
        visibility: hidden;
    }

    .copyright {
        margin-left: 10px !important;
        margin-bottom: -40px;
    }
}

@media only screen and (max-width: 767px) {
    body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

    .container { min-width: 0; margin-left: 0px; margin-right: 0px; }
    .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
    .row .row .column, .row .row .columns { padding: 0; }
    .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; }
    .column:last-child, .columns:last-child { margin-right: 0; float: none; }
    .row .row .column, .row .row .columns { padding: 0; }
    .column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; }
    .column:last-child, .columns:last-child { margin-right: 0; float: none; }
    [class*="column"] + [class*="column"]:last-child { float: none; }
    [class*="column"]:before, [class*="column"]:after { display: table; }
    [class*="column"]:after { clear: both; }


    .push_one, .push_two, .push_three, .push_four, .push_five, .push_six, .push_seven, .push_eight, .push_nine, .push_ten, .push_eleven, .centered { margin-left: 0% !important; }

    span {
        letter-spacing: 40px !important;
    }

    .nav li {
        margin-right: 62px !important;
        text-align: center !important;
        letter-spacing: 6px !important;
    }

    ul li:last-child { 
        margin-right: 0px !important; 
    }

    .intro h1 {
        font-size: 44px !important;
        margin-bottom: -40px !important;
    }

    .intro img {
        visibility: hidden !important;
    }

    .dotted_line {
        visibility: hidden !important;
    }

    .cta {
        height: 450px !important;
        width: 330px !important;
        margin-top: -30px !important;
        margin-bottom: -250px !important;
    }

    .cta h2 {
        font-size: 20px !important;
        margin-left: 5px !important;
        margin-top: -10px !important;
    }

    .cta p {
        font-size: 16px !important;
        margin-left: 5px !important;
        margin-top: -10px !important;
    }

    .home_form {
        margin-left: 20px !important;
    }

    .left input {
        width: 280px !important;
        margin-bottom: 10px !important;
    }

    .right {
        width: 280px !important;
        float: none !important;
    }

    .right textarea {
        height: 120px !important;
        width: 285px !important;
    }

    .submit {
        background: url('../img/submit_btn.png') no-repeat !important;
        float: left !important;
        margin-top: 20px !important;
    }

    .social {
        visibility: hidden !important;
    }

    .social_icons {
        margin-right: auto;
        margin-left: auto;
    }

    footer .left p {
        width: 330px !important;
    }

    footer .middle {
        visibility: hidden;
    }

    footer .right {
        visibility: hidden;
    }

    .copyright {
        margin-left: 10px !important;
        margin-bottom: -40px;
    }

}

スパンと .nav li 以外の 2 番目のメディア クエリには多くの調整を加えていませんが、ヘッダーとナビゲーションの問題を確認するには十分でした。

4

2 に答える 2

3

@media only screen and (max-width: 767px)画面幅が のデバイスにも対応しているためです320px <= x <= 480px。ここでa を設定する必要がありmin-width: 481pxます。

于 2013-03-19T17:35:46.917 に答える
0

はい、最初のメディア クエリの基準を満たすすべてのデバイスが自動的に 2 番目のメディア クエリの基準を満たすため、おそらく 2 番目のメディア クエリで最小幅が必要です。

于 2013-03-19T17:35:54.703 に答える