css 媒体查询如何实现更加精确的判断?

Road
    3461983
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
            }

            @media(width: 992px) {
                .box {
                    background-color: red;
                }
            }
        </style>


    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

    目前, 窗口宽度等于992的时候, box呈现红色
    image.png

    需求

    当宽度大于992, 呈现蓝色

    当宽度小于992 呈现绿色

    重点是不能在等于992的时候变成蓝色或绿色

    也就是说, 如何才能保证这三者样式必须分离? 互不干涉

    css
    回复
    阅读 787
    2 个回答
    得票最新
    code_shuai
      7881627
      ✓ 已被采纳
      // 临界条件 加上就行了吧
<style>
      .box {
        width: 100px;
        height: 100px;
      }
      @media(min-width: 992.1px) {
          .box {
              background-color: blue;
          }
      }

      @media(width: 992px) {
          .box {
              background-color: red;
          }
      }

      @media(max-width: 991.9px) {
          .box {
              background-color: green;
          }
      }
    </style>
      回复
      IanSun
        2.1k119
        .box { background-color: green; }

@media (min-width: 992px) {
    .box { background-color: blue; }
}

@media (width: 992px) {
    .box { background-color: red; }
}
        回复
        查看全部 2 个回答
        推荐问题
        宣传栏
        787