怎麼幹媒體查詢

-1

我有完全相同的性能的CSS兩個媒體查詢：怎麼幹媒體查詢

@media only screen and (max-width: 320px) { 
    h2 { 
     font-size: 3rem; 
     line-height: 3.5rem; 
    } 
    .slider h3 { 
     font-size: 2.5rem; 
     line-height: 2.5rem; 
    } 
    .col .wrapper { 
     padding: 3rem; 
    } 
} 
@media only screen and (max-width: 480px) { 
    h2 { 
     font-size: 3rem; 
     line-height: 3.5rem; 
    } 
    .slider h3 { 
     font-size: 2.5rem; 
     line-height: 2.5rem; 
    } 
    .col .wrapper { 
     padding: 3rem; 
    } 
}

我有什麼做的，幹他們？我想：

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

，並沒有工作。也試過：

@media only screen and (max-width: 320px), (max-width: 480px)

，並沒有擦出火花。任何幫助？謝謝。

來源

2015-05-02 Labanino

'（max-width：320px），（max-width：320px）'，鏈接兩個相同的最大寬度值？ –

對不起，忘了更改數值。 – Labanino

也通常在CSS媒體查詢中，邏輯運算符'和'變得像'max-width'和'min-width'，而不是兩個最大寬度（就像您嘗試過的那樣）。這個不成立。 –

，因爲它們都包含完全相同相同的CSS聲明，他們都有什麼意義？

只要擺脫@media only screen and (max-width: 320px){...}，你應該沒問題。

其餘@media only screen and (max-width: 480px){...}聲明將自動應用於最大480像素的所有寬度（這包括320px，因爲320px < 480px）。

來源

2015-05-02 01:43:12

你可以使用後者，因爲他們只是相同的CSS和媒體查詢(max-width: 480px)仍然命中分辨率320px及以下

所以，你只需要這樣：

@media only screen and (max-width: 480px) { 
    h2 { 
     font-size: 3rem; 
     line-height: 3.5rem; 
    } 
    .slider h3 { 
     font-size: 2.5rem; 
     line-height: 2.5rem; 
    } 
    .col .wrapper { 
     padding: 3rem; 
    } 
}

來源

2015-05-02 01:42:17

怎麼幹媒體查詢

回答

相關問題