让我们看看更多使用媒体查询的例子。媒体查询是为不同设备提供自定义样式表的流行技术。为了演示一个简单的例子，我们可以改变不同设备的背景颜色/*将body的背景颜色设置为棕褐色*/body{background-color:tan;}/*在992px或更低的屏幕上，将背景颜色设置为设置为蓝色*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*在600px或更小的屏幕上，将背景色设置为橄榄色*/@mediascreenand(max-width:600px){body{background-color:olive;}}Columns媒体查询媒体查询的一个常见用途是创建灵活的布局。在这个例子中，我们创建了一个布局，根据不同的屏幕尺寸，在四列、两列和全宽列之间变化：width:25%;}/*在992px宽或在较小的屏幕上，从四列到两列*/@mediascreenand(max-width:992px){.column{width:50%;}}/*在宽度为600px或更小的屏幕上，让Columns堆叠在彼此之上而不是彼此相邻*/@mediascreenand(max-width:600px){.column{width:100%;}}使用媒体查询来改变字体大小你也可以使用媒体查询来改变屏幕大小元素的不同字体大小：/*如果屏幕尺寸超过600px宽，设置font-size为80px*/@mediascreen和（最小宽度：600px）{div.example{字体大小：80px；}}/*如果屏幕尺寸为600px或更小，将字体大小设置为30px*/@mediascreenand(max-width:600px){div.example{font-size:30px;}}使用附加值：在下面的示例中，我们使用逗号将另一个媒体查询添加到我们现有的媒体查询中（这将充当OR运算符）：例如，当宽度在600px和900px之间或高于1100px时-更改appearance@mediascreenand(max-width:900px)and(min-width:600px),(min-width:1100px){div.example{font-size:50px;填充：50px；边框：8px纯黑色；背景：黄色；}}更多多么棒的css3媒体查询文章
