如果文档宽度小于 300 像素则修改背景颜色(background-color):
<style> .m { background-color:lightgreen;} @media screen and (max-width: 300px) { .m { background-color:lightblue; } } </style>
<p class='m'>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时,背景颜色会变成淡蓝,否则是淡绿色。 </p>
运行结果:
如果文档宽度小于 300 像素则修改背景颜色(background-color):
<style> .m { background-color:lightgreen;} @media screen and (max-width: 300px) { .m { background-color:lightblue; } } </style>
<p class='m'>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时,背景颜色会变成淡蓝,否则是淡绿色。 </p>
运行结果: