/* 假设大家想要在页面宽度小于等于320px时改变文字颜色 */
@media(max-width: 320px) {
p {
color: red;
}
}
/* 又或者大家想要在页面高度小于等于480px时改变图片大小 */
@media(max-height: 480px) {
img {
width: 50%;
height: 50%;
}
}如上面的代码所示，大家在使用媒介查询时可以根据不同条件改变样式。在第一个样式代码块中，大家使用了max-width，当页面宽度小于等于320px时就会使p标签文字颜色变成红色；在第二个样式代码块中，大家使用了max-height，当页面高度小于等于480px时就会改变图片大小为原来的一半。
需要注意的是，大家不仅可以使用max-width和max-height，还可以使用min-width和min-height，它们的作用与其名称相似，只是设置值的方向相反。
最后，需要特别提醒的是，在使用媒介查询时需要注意设备的不同屏幕像素密度，如果在普通设备上设置的像素宽高在高分辨率设备上就会显得非常小，建议使用em、rem、vw、vh等相对单位。