CSS：一個類中定義媒體查詢

是否可以寫類似CSS：一個類中定義媒體查詢

.global-container 
    margin-top: 60px 
    background-image: $image-bg 
    @media(max-width: 767px) 
    margin-top: 0 
    background-image: none

因此，我們可以一類

我已經試過這中定義的桌面和移動CSS，但似乎不工作

UPDATE：這是實際工作： http://css-tricks.com/media-queries-sass-3-2-and-codekit/

來源

2014-01-24 cqcn1991

請折騰'，'到你的代碼...： -/ –

你應該這樣做：

@media all and (max-width: 767px) { 
    .global-container { 
     margin-top: 0; 
     background-image: none; 
    } 
}

如果你想針對桌面，您可以使用：

@media (min-width:1025px) { 
    .global-container { 
     margin-top: 0; 
     background-image: none; 
    } 
}

我只注意到你正在使用SASS，你可以這樣做：

.global-container { 
    margin-top: 60px; 
    background-image: $image-bg; 
    @media (max-width: 767px) { 
     /* Your mobile styles here */ 
    } 
    @media (min-width:1025px) { 
     /* Your desktop styles here */ 
    } 
}

來源

2014-01-24 03:24:09 Felix

然後我在哪裏可以定義'desktop'行爲？ – cqcn1991

所以，我必須鍵入'。全球-container'而不是兩次在同一個地方築巢其不同的行爲？ – cqcn1991

@ cqcn1991檢查我的更新 – Felix

你肯定有應用某種多媒體查詢。代碼並不神奇，CSS需要特定的參數來處理這些查詢。

您可以使用JS，但不建議根據您的用例。

這裏是一個CSS解決方案

@media all and (minmax-width: 0px) and (min-width: 320px), (max-width: 320px) 
    { Insert Code }; 
}'

來源

2014-01-24 03:43:23

它的工作原理：

.column-1-3 { 
    width: 33.3333%; 
    @media (max-width: 600px) { 
    width: 100%; 
    } 
}

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

來源

2014-01-24 03:44:07 cqcn1991

在純CSS，答案是否定的。你不能。媒體查詢應該始終是一個外殼，在這個條件下包含內部應用。

在SASS少，但是，它是完全有效的。支持嵌套的大括號的任何轉換器應該能夠在媒體查詢移動到外面，因此允許CSS來就像上面說的工作。（你可以在編譯SASS /更少文件後檢查輸出CSS，看看他們做到這一點。）

所以，如果你有這樣的事情：

body { 
    background:green; 
    @media (min-width:1000px) {background:red;} 
}

屏幕會變成綠色的CSS（因爲它忽略車身風格的定義塊中怪異的事情@media）和SASS/LESS紅（因爲它可以讓你想真正看到）。

來源

2015-11-03 11:00:47 dkellner

CSS：一個類中定義媒體查詢

回答

相關問題