使用css3的樣式來改變屏幕寬度

Question

我試圖圍繞css3不同的屏幕寬度的不同樣式來使我的網站更靈活。

我基本上喜歡有3種不同的風格，都在同一個樣式表中。

1. 對於屏幕移動設備的尺寸爲480像素馬克斯（？）
2. 對於平均屏幕尺寸即1200像素寬
3. 對於互聯網皮條客1900px寬，超越

我想這是做像這樣：

@media all and (max-width: 480px){ 
// my styles for iphones and androids 
} 

@media all and (min-width: 480px) and (max-width: 1900px) { 
// my styles for sites anywhere between mobile and large resolutions 
} 

@media all and (min-width: 1900px){ 
// my styles for all the bosses out there 
} 

我能理解這個嗎？對我來說，這種邏輯似乎與其應該如何相反。即當我在1900px寬的加載移動設備樣式，反之亦然。

除了這個問題，這些@media控件的順序是否重要？即將移動設備樣式放在大屏幕樣式之前，反之亦然？

Answer 1

建議您向我推薦代碼。

您可能會考慮在空間中添加px以避免任何問題。喜歡的東西

@media all and (max-width: 480px){ 
// my styles for iphones and androids 
} 

//make this min-width start at 481px, etc. 
@media all and (min-width: 481px) and (max-width: 1900px) { 
// my styles for sites anywhere between mobile and large resolutions 
} 

而且，看看這個http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/