如果我指定了 @media(min-width: 768) 和 (max-width: 991px) {...}，为什么我的媒体查询会在断点 width:991 px 处恢复为基本样式？

Question

如果您能在以下方面提供一些帮助，我将不胜感激。

我将媒体查询定义如下：

/*基本样式 -- 移动优先/ for mobile

@media (min-width:768px) and (max-width:991px) {...} for tablet

@media（最小宽度：992px）{...} 用于桌面

在宽度的断点处：991px 渲染恢复为该值的基本样式，在 992px 处正确显示桌面版本。

为什么会发生这种情况，如何修复 991px 宽度的错误？

/***********base styles - mobile first****************/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Comic Sans MS', Helvetica, Arial, sans-serif;
  font-weight: bold;
  position: relative;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.section {
  background-color: #999999;
  border: 3px solid;
  margin-right: 50px;
  margin-left: 50px;
  margin-bottom: 20px;
}

.title {
  width: 120px;
  text-align: center;
  border-left: 3px solid;
  border-bottom: 3px solid;
  padding: 5px;
  float: right;
}

.description {
  padding: 5px;
  padding-top: 15px;
  margin: 10px;
}

#title1 {
  background-color: #D59898;
}

#title2 {
  background-color: #C14543;
}

#title3 {
  background-color: #E5D198;
}


/*******medium device only************/

@media(min-width: 768px) and (max-width: 991px) {
  h1 {
    width: 90%;
    left: 35px;
  }
  .section {
    margin: 0px;
    margin-bottom: 5%;
    width: 40%;
    float: left;
    left: 35px;
  }
  #section3 {
    clear: both;
    width: 90%;
  }
  #section1 {
    margin-right: 10%;
  }
}


/*******large device only************/

@media(min-width: 992px) {
  .section {
    margin: 0px;
    margin-right: 2%;
    width: 30%;
    float: left;
  }
  #section1 {
    margin-left: 2%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Module 2 Solution</title>
  <link rel="stylesheet" href="style.css">
  <style>

  </style>
</head>

<body>

  <h1>Our Menu</h1>
  <div>
    <section id="section1" class="section">
      <div id="title1" class="title">Chicken</div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est velit, fermentum in maximus ut, venenatis a massa. Nunc eu quam purus. Quisque semper nulla in urna bibendum efficitur. Sed consequat mi eget dolor accumsan, tempus sagittis
        leo accumsan. Donec id ex nibh. Etiam luctus mi eget mauris semper pretium. Mauris ornare leo ut elit efficitur, nec tempus justo fringilla. Mauris lorem justo, accumsan eu malesuada sed, lacinia at libero. Aenean commodo nec velit vitae molestie.
        Fusce vel leo augue. </div>
    </section>
    <section id="section2" class="section">
      <div id="title2" class="title">Beef</div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est velit, fermentum in maximus ut, venenatis a massa. Nunc eu quam purus. Quisque semper nulla in urna bibendum efficitur. Sed consequat mi eget dolor accumsan, tempus sagittis
        leo accumsan. Donec id ex nibh. Etiam luctus mi eget mauris semper pretium. Mauris ornare leo ut elit efficitur, nec tempus justo fringilla. Mauris lorem justo, accumsan eu malesuada sed, lacinia at libero. Aenean commodo nec velit vitae molestie.
        Fusce vel leo augue.</div>
    </section>
    <section id="section3" class="section">
      <div id="title3" class="title">Sushi</div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est velit, fermentum in maximus ut, venenatis a massa. Nunc eu quam purus. Quisque semper nulla in urna bibendum efficitur. Sed consequat mi eget dolor accumsan, tempus sagittis
        leo accumsan. Donec id ex nibh. Etiam luctus mi eget mauris semper pretium. Mauris ornare leo ut elit efficitur, nec tempus justo fringilla. Mauris lorem justo, accumsan eu malesuada sed, lacinia at libero. Aenean commodo nec velit vitae molestie.
        Fusce vel leo augue.</div>
    </section>
  </div>
</body>

</html>

Answer 1

如果页面上有一些缩放（可能与高 DPI 屏幕使用有关），您的浏览器可能无法计算最大值。 Bootstrap 中使用了一个众所周知的解决方法，例如

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

你可以看看它here

Answer 2

我怀疑它在 exaclty 991px 时没问题，因为包含最大宽度。

但是 991px 和 992px 之间会发生什么？您还没有告诉它如何在该范围内设置样式，所以它会返回到基本设置。

由于包含最大宽度和最小宽度，您可以：

@media (min-width:768px ) and (max-width:992px) {...} for tablet

@media (min-width: 992px) {...} for desktop

或

@media (min-width:768px ) and (max-width:991px) {...} for tablet

@media (min-width: 991px) {...} for desktop

取决于您认为桌面宽度的确切起点。

body {
  width: 100vw;
  height: 100vh;
  background: yellow;
}

/*for tablet*/
@media (min-width:768px) and (max-width:992px) {
  body {
    background: pink;
  }
}

/*for desktop*/
@media (min-width: 992px) {
  body {
    background: cyan;
  }
}

如果我指定了 @media(min-width: 768) 和 (max-width: 991px) {...}，为什么我的媒体查询会在断点 width:991 px 处恢复为基本样式？

Why does my media query revert to base styling at breakpoint width:991 px if I have specified @media(min-width: 768) and (max-width: 991px) {...}?

html

css

media-queries