媒體查詢被重寫

我做了一個「響應屬性」混入這需要一個CSS屬性和它的值在五個不同的斷點作爲參數：媒體查詢被重寫

@mixin responsiveProp ($prop, $xs, $sm, $md, $lg, $xlg) { 
    @media only screen and (min-width: 0px) { 
    #{$prop}: $xs; 
    } 
    @media only screen and (min-width: 768px) { 
    #{$prop}: $sm; 
    } 
    @media only screen and (min-width: 992px) { 
    #{$prop}: $md; 
    } 
    @media only screen and (min-width: 1200px) { 
    #{$prop}: $lg; 
    } 
    @media only screen and (min-width: 1440px) { 
    #{$prop}: $xlg; 
    } 
}

例如@include responsiveProp(height, 1300px, 900px, 550px, 500px, 500px);

這通常可以很好地減少CSS中的LOC，但是當在Chrome開發工具中使用智能手機佈局測試上述示例時，儘管寬度爲< 768px，但$ xs斷點將被$ sm斷點覆蓋。我不明白爲什麼會發生這種情況。有任何想法嗎？

來源

2016-09-06 Emile Paffard-Wray

你應該結合最小和最大：'...和（最小寬度：0px）和（最大寬度：767px）'（最大應該是下一個最小-1） – somethinghere

@somethinghere這裏沒有它仍然沒有工作，它應該沒有任何區別，只要它作爲符合條件的邏輯沒有改變 –

你的輸出是什麼？你有沒有正確的視口元標記集？ – somethinghere

我忘了把它添加到我的index.html：<meta name="viewport" content="width=device-width, initial-scale=1">。這解決了問題。

來源

2016-09-06 15:20:52

Woopwoop。好東西，儘管你應該馬上注意到這一點在設備上:) – somethinghere

媒體查詢被重寫

回答

相關問題