分離CSS DIV代碼爲PC和爲手機

在我的CSS文件的部分，許多特性都是常見的，但其他人有一臺電腦和一個手機瀏覽網頁之間變化。我爲此使用了@media screen and (max-width: X px) - 對於窄屏幕和寬屏幕，有一種行爲。各種解決方案發生在我身上：分離CSS DIV代碼爲PC和爲手機

兩個單獨的文件/節

我可以在CSS分成兩個文件，或爲一個具有以下結構：

@media screen and (max-width: X px) { 
    *whole CSS code for cellphones* 
} 
@media screen and (min-width: X+1 px) { 
    *whole CSS code for PCs* 
}

這將意味着一個重複代碼的很大一部分。

公共部分+特定部分

與上述類似，但共同的部分是外：

body { 
    *common code for body* 
} 
*common code for divs* 
@media screen and (max-width: X px) { 
    body { 
    *cellphone-specific code for body* 
    } 
    *cellphone-specific code for divs* 
} 
@media screen and (min-width: X+1 px) { 
    body { 
    *PC-specific code for body* 
    } 
    *PC-specific code for divs* 
}

這似乎是理想的：它是非常方便的改變如特定的寬度和高度常數（我把一切都在一起，沒有追過整個文件中的常數），如果我需要改變X不變甚至創造一些第三個版本（比如，平板電腦，將會變得更加便利）。它只有一個小缺點：它似乎不可能，或者至少在我嘗試時不起作用。

body { 
    *common code for body* 
    @media screen and (max-width: X px) { 
    *cellphone-specific code for body* 
    } 
    @media screen and (min-width: X+1 px) { 
    *PC-specific code for body* 
    } 
}

我的問題是：什麼是「盡其用」的解決方案

在特定的div

這是我實際使用一切嗎？如果有一些困難，如何解決它們？

來源

2013-06-25 Pavel V.

如果您希望支持舊版瀏覽器，但不支持@media，則應該只將樣式放入@media for mobile（假設您只能正確支持支持@media的移動瀏覽器）。 PC的造型應該只能通過手機造型來改寫。

因此，選擇4？

來源

2013-06-27 10:04:16

分離CSS DIV代碼爲PC和爲手機

回答

相關問題