用css對不同的屏幕尺寸指定不同的類

讓我有2個類名爲class1和class2。我也有一個元素id="responsive_element"。我想要的是當屏幕尺寸低於768px時將class1分配給此元素，否則將class2分配給此元素。用css對不同的屏幕尺寸指定不同的類

我能做到這一點不象：

@media screen and (max-width:768px){ 
    #responsive_element{ 
    .class1() 
    } 
} 

@media screen and (min-width:769px){ 
    #responsive_element{ 
    .class2() 
    } 
}

是否有任何「CSS唯一」的方式來實現這一目標？

編輯：我想我無法清楚地解釋我的問題。我已經可以通過少編譯來做到這一點，但是對於長類定義並且使用它們太多，css文件的大小會增加。我想通過簡單地改變元素的類來處理它。

來源

2016-11-25 Bünyamin Sarıgül

我想你是以錯誤的方式接近這個問題。您不會根據屏幕大小分配課程。您分配類，然後根據屏幕大小定義每個類的功能。 –

@JordiNebot不，我有兩個類已經定義和使用的一些其他元素，也沒有任何關係的屏幕尺寸。像'.class1 {color：red;} .class2 {color：blue;}'一樣。但我希望我的元素在大屏幕上使用其中一個，而在較小的屏幕上使用其他元素。我想要這樣做，而不是一次又一次地寫同樣的東西。 –

請注意，在生產中使用Less的預期方法是將較少的樣式錶轉換爲CSS。所以，當你說你想這樣做時，「不要一次又一次地寫同樣的東西」，這就是*爲*的「少」。你把它寫成Less，以至於作爲程序員，即使在最終的生產CSS中，由於CSS固有的侷限性，它們也必須一次又一次地重複寫入，所以不必一次又一次地寫同樣的東西。 –

除了.class1()和.class2()調用，您的較少的代碼已經是CSS。具體來說，應用基於屏幕大小的樣式的@media查詢並非特定於較低的。因此，舉例來說，下面是純CSS：

@media screen and (max-width:768px){ 
    #responsive_element{ 
    color: blue; 
    } 
} 

@media screen and (min-width:769px){ 
    #responsive_element{ 
    color: red; 
    } 
}

如果你想你的少轉換成CSS，所有你需要做的是從.class1和.class2的CSS代碼複製到.class1()和.class2()的地方調用。實際上，由於Less是作爲CSS轉換器實現的，因此您可以使用在線轉換器LESS2CSS爲您進行轉換。

如果您問是否有純CSS的方式來編寫這些查詢，以便他們使用現有的.class1和.class2樣式定義而不進行復制，那麼我相信答案是否定的。少發明的主要原因是因爲CSS不支持這種樣式信息的重用。

來源

2016-11-25 08:53:44

如果你的意思是，有沒有一種方法可以單獨使用CSS來改變元素的類以響應更改屏幕大小（從字面上看，向元素的HTML「class」屬性添加或刪除新的類名，以便CSS適用於不同的類將在那個元素上生效），那麼答案就是「不，你不能單獨使用CSS來完成」。你可以通過查看生成的CSS來清楚地看到元素的類屬性，它只是使用類作爲一個方便的技巧來命名部分可共享的CSS）

以您似乎想要的方式更改元素類的唯一方法是對DOM進行更改，您可以通過JavaScript顯然執行此操作，但不能單獨使用CSS。

來源

2016-11-26 00:30:35

用css對不同的屏幕尺寸指定不同的類

回答

相關問題