媒體查詢衝突

我正在使用媒體查詢來修改我的CSS在不同的設備上，但是，當我對第二個媒體查詢（最大寬度：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李但是這足以看出在頭&導航的問題。

來源

2013-03-19 Angel

因爲@media only screen and (max-width: 767px)也針對屏幕寬度爲320px <= x <= 480px的設備。您需要在此處設置min-width: 481px。

來源

2013-03-19 17:35:46

或者簡單地顛倒順序，將第二個媒體查詢放在第一個，第一個媒體查詢放在第二個。 – gaynorvader 2013-03-19 17:38:27

@ gaynorvader，對！ +1也可以工作。但是使用'min-width'，你會更安全一些，尤其是如果你絕對不想將任何樣式應用到其他設備。 – 2013-03-19 17:39:30

完美運作。我從改變所述第二媒體的查詢： @媒體僅屏幕和（最大寬度：767px）到： @媒體僅屏幕和（最小寬度：481px）和（最大寬度：767px）感謝你們！ – Angel 2013-03-19 17:48:07

是的，您可能需要在第二個媒體查詢中使用最小寬度，因爲滿足第一個媒體查詢條件的所有設備都將自動滿足第二個媒體查詢的條件。

來源

2013-03-19 17:35:54

媒體查詢衝突

回答

相關問題