媒体查询多对连续min-width和max-width发现的问题_css媒体查询是开区间还是闭区间-CSDN博客

本文链接：https://blog.csdn.net/weixin_43939111/article/details/119818201

以下面代码为例，单独使用一对min-width和max-width，范围是>=最小值且<=最大值，当时想无缝衔接，就把区间写成[769,1211]和[1212,1230]，但是实际演示时发现，前面的1211给我把闭区间变成了开区间/(ㄒoㄒ)/~~
最后作用区域为[769,1211)和[1212,1230]
导致769-1210变红，1212-1230变黄，然后唯独1211这个尺寸没人管了拉缩浏览器宽度到1211时为初始绿色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    html,body{height:100%;}
    #one{height:100%;background-color: green;}
    @media screen and (min-width:769px) and (max-width:1211px){
      #one{
        background:red;
      }
    }
    @media screen and (min-width:1212px) and (max-width:1230px){
      #one{
        background:yellow;
      }
    }
  </style>
</head>
<body>
    <div id="one"></div>
</body>
</html>

如果连续区域衔接时，应该将尺寸包含进去。
正确写法：

    @media screen and (min-width:769px) and (max-width:1212px){
      #one{
        background:red;
      }
    }
    @media screen and (min-width:1212px) and (max-width:1230px){
      #one{
        background:yellow;
      }
    }