如果我指定了@media(min-width: 768) 和 (max-width: 991px) ...，为啥我的媒体查询会在断点宽度：991 px 处恢复为基本样式？
Posted
技术标签:
【中文标题】如果我指定了@media(min-width: 768) 和 (max-width: 991px) ...，为啥我的媒体查询会在断点宽度：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) ...?如果我指定了@media(min-width: 768) 和 (max-width: 991px) ...，为什么我的媒体查询会在断点宽度：991 px 处恢复为基本样式？ 【发布时间】：2021-11-06 07:27:09 【问题描述】：我将非常感谢以下方面的帮助。
我已将媒体查询定义如下：
/*基本样式 -- 移动优先/ 用于移动
@media (min-width:768px) 和 (max-width:991px) ... 用于平板电脑
@media (min-width: 992px) ... 用于桌面
在 width: 991px 的断点处，渲染恢复为该值的基本样式，并且在 992px 处正确显示桌面版本。
为什么会发生这种情况，如何修复宽度为 991 像素的错误？
/***********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>【问题讨论】：
感觉max-width的值是non-inclusive。不过我可能是错的。这可能是有道理的，因为从技术上讲，宽度可以是像素的几分之一，例如991.5像素 这能回答你的问题吗？ Bug with browsers' interpretation of @media queries 有一个已删除的答案，但它会解决问题：删除max-width - 因为您不需要它 - 除非您专门针对一个元素仅 更改该断点。即使这样，您也不需要更大的min-width: 992px，因为您希望它恢复默认样式。
不回答您的问题。但是您通常希望尽可能在媒体查询中取消max-width。在断点处你想增加布局的复杂性，这通常意味着你覆盖了前一个断点的某些属性。
【参考方案1】：
如果页面上有一些缩放（可能与高 DPI 屏幕使用率有关），您的浏览器可能无法计算最大值。例如，在 Bootstrap 中有一个众所周知的解决方法
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) ...
为什么要减去 .02px？浏览器目前不支持范围上下文查询，因此我们通过使用更高精度的值来解决最小和最大前缀以及具有分数宽度的视口的限制（例如，在高 dpi 设备上的某些条件下可能发生） .
你可以阅读它here
【讨论】：
【参考方案2】：我怀疑精确到 991 像素是可以的，因为 max-width 包含在内。
但是在 991px 和 992px 之间会发生什么？你还没有告诉它如何在那个范围内设置样式，所以它会回到基本设置。
由于 max-width 和 min-width 包含在内，您可以：
@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;
【讨论】：
谢谢。我很感激。但是，我们已被指示不要重叠包含边距。我是个新手，实际上是 2 天的 CSS 经验。它在 991 的确切断点处恢复为基本样式：/ 嗨，有趣的是，我想不出为什么会做出该指令，但是您将不得不使用小数位解决方案，尽管这仍然会在覆盖范围内留下空白。 是的，这实际上很好地解决了问题。谢谢！以上是关于如果我指定了@media(min-width: 768) 和 (max-width: 991px) ...，为啥我的媒体查询会在断点宽度：991 px 处恢复为基本样式？的主要内容，如果未能解决你的问题，请参考以下文章