基金會媒體查詢 - 隱藏換隻小

的.hide換小不僅是最大寬度0 - 39.9375em基金會媒體查詢 - 隱藏換隻小

但.show換小僅是0EM - 40EM 。

不應該只是.hide-for-small只能是0-40em，因爲那是隻顯示小數字的數字。爲什麼這兩個查詢之間的最大寬度不同。

@media screen and (max-width: 39.9375em) { 
    .hide-for-small-only { 
    display: none !important; } } 

@media screen and (max-width: 0em), screen and (min-width: 40em) { 
    .show-for-small-only { 
    display: none !important; } }

來源

2017-04-09 Pathway

這是那些時代代碼和可理解代碼稍有不同的東西之一。

基金會的@media查詢

/*小*只/ @media屏幕（最大寬度：39.9375em）{}

/*中和了*/@media屏幕和（最小寬度：40EM）{}

/*僅培養基*/@media屏幕和（最小寬度：40EM）和（最大寬度： 63.9375em）{}

/*大型一個（最小寬度：64em）和（最大寬度： 74.9375em）{}大屏幕和（最小寬度：64em）{}

/

因此，當寬度=== 40em，我們會期待中。

之所以.hide-for-small-only是max-width: 39.9375em是，它有可能向width正好等於39.9375em和用於條件爲真（例如隱藏）。因此，對於small範圍內的所有寬度值，此元素是隱藏的display: none。這非常簡單易讀。

而如果你想顯示元素（.show-for-small-only）爲0至39.9375em只，那麼第一寬度，你會想隱藏內容將是一個像素在small === 40EM（因此min-width: 40em）。這不是在x和y之間顯示節目的媒體查詢，而是隱藏在x和y之下。

最令人困惑的部分是因爲它們被命名爲一個「隱藏」和另一個「顯示」......但實際上它們都是隱藏的，但寬度不同。

我認爲max-width: 0em是因爲@media查詢是由SASS mixin生成的，並且必須適用於所有「only」類，這實際上需要max-width來定義底部寬度，但不是那麼多小。

來源

2017-04-09 18:58:14 tymothytym

基金會媒體查詢 - 隱藏換隻小

回答

相關問題