屏幕缩小时，改变CSS样式, @media的使用

如果文档宽度小于 300 像素则修改背景颜色(background-color):

<style>
.m {
   background-color:lightgreen;}

@media screen and (max-width: 300px) {
    .m {       background-color:lightblue;   }
}
</style>

<p class='m'>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。 </p>

运行结果：