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

Question

我正在努力思考 css3 针对不同屏幕宽度的不同样式，以使我的网站更加灵活。

我基本上想要 3 种不同的样式，都在同一个样式表中。

1. 适用于屏幕尺寸最大为 480 像素(？)的移动设备
2. 对于平均屏幕尺寸，即 1200 像素宽
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
}

我的理解正确吗？在我看来，这种逻辑似乎与它应该如何执行相反。即当我的宽度为 1900 像素时，它会加载移动设备样式，反之亦然。

除了这个问题，这些@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/