使用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/