使用css3的样式来改变屏幕宽度

Question

我试图围绕css3针对不同屏幕宽度的不同风格进行思考，以使我的网站更加灵活。

我基本上希望有3种不同的风格，都在同一样式表中。

1. 适用于屏幕尺寸最大为480像素（？）
的移动设备
2. 平均屏幕尺寸，即1200px宽
3. 适用于互联网皮条客1900像素宽，超出

我想它是这样完成的：

@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/