如果文档宽度小于 300 像素则修改背景演示(background-color) - 在线编辑器

          <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
    body {
      background-color: lightgreen;
    }

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

<body>
  <p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
  <script>
    function resize_window() {
      window.open('/examples/css3-media-example1/result.html', 'newwindow', 'height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
    }
  </script>
</body>
</html>
        