css 媒体查询（Chrome 104）

<div></div>

      div {
        width: 100px;
        height: 100px;
      }

      @media (width <= 400px) {
        /* 屏幕宽度 小于等于400px 时 */
        div {
          background-color: red;
        }
      }

      @media (400px <= width <= 800px) {
        /* 屏幕宽度 大于等于400px和小于等于800px 时 */
        div {
          background-color: blue;
        }
      }
      @media (800px <= width <= 1200px) {
        /* 屏幕宽度 大于等于800px和小于等于1200px 时 */
        div {
          background-color: green;
        }
      }

      @media (width >= 1200px) {
        /* 屏幕宽度 大于1200px 时 */
        div {
          background-color: pink;
        }
      }