我们也可以在CSS规则中，使用@media插入一些额外的样式表，来实现媒体查询。这样的方式虽然增大了单个的样式表体积，但是同时却减少了请求数，这对于Web性能具有促进意义。在下面的例子中，我们将使用display:flex和flex-direction:row-reverse，来使figure元素的说明文字在宽度大于48rem的时候居于顶部。

@media (min-width: 48rem) { 
.figure--horizontal-reverse { 
display : flex; 
flex-direction : row-reverse; } 
}

除了改变页面布局，我们也可以使用媒体查询，在不同的响应断点处为某些页面元素做增强处理。

在媒体查询中，我们可以给宽度和高度来设置任意的最大或最小值，能够使用很多CSS中的单位，如px、em和rem。但是问题来了，我们该如何设置断点，以便判断何时加入新的样式呢？