随着移动设备的不断普及，我们的网页需要能够适应不同设备的屏幕大小，这时候CSS的media规则就派上用场了。

使用media查询，我们可以根据设备屏幕的尺寸，来动态的修改网页的样式。比如针对移动设备，我们可以让字体更大、行距更大、页面内容布局更简洁，来提高用户的使用体验。

/* 定义一个媒体查询 */@media only screen and (max-width: 600px) {/* 自定义手机设备的样式 */body {font-size: 16px;}h1 {font-size: 24px;}}/* 定义另一个媒体查询 */@media only screen and (min-width: 600px) {/* 更改其他设备的样式 */body {font-size: 20px;}h1 {font-size: 36px;}}

在上面的代码中，我们定义了两个媒体查询。第一个媒体查询针对屏幕宽度小于600px的手机设备，第二个媒体查询则是对大于等于600px的设备进行的定义。

通过这种方式，我们可以随时根据不同的屏幕尺寸来修改样式，达到更好的响应式效果。