CSS 媒体查询在 5 个特定分辨率大小时中断....什么？

Question

我刚刚完成了我的第一个 javascript 项目（一个使用 three.js 的 3D 网站）但就在发布之前我意识到我没有优化尺寸和内容以在访问时看起来相同1920x1080 浏览器以外的网站。所以我开始研究如何做到这一点，并发现了如何设置 DevicePixelRatio 或使用 CSS 的媒体查询。在谷歌搜索和查看 Whosebug 之后，我决定使用 CSS 媒体查询，但我运行遇到了 2 个奇怪的问题。

1) 我正在根据分辨率更改字体大小，但因为我正在使用开发人员工具动态更改浏览器中的视口（？）大小。我单击“切换设备工具栏”，然后 select 响应并开始缩小以查看我的字体大小更改是否生效。

除此之外，他们一直按预期工作，即使在何时应用媒体查询时分辨率大小没有差距，但有两点，分辨率或视口的特定尺寸（无论 F12 让你改变什么，我不知道它叫什么）被排除在外。例如...

我有媒体查询在设备宽度分辨率为

时生效

600 到 699px 之间应用字体大小更改应用小图像的缩放在 700 到 739px 之间应用字体大小更改应用小图像的缩放在 740 到 767px 之间应用字体大小更改应用小图像缩放

不断...

这是代码...



@media (min-width: 650px) and (max-width: 699px) {
  * {
    font-size:35%;
  }
  #icon {
    width: 2.2em;
  }
  #tg {
    width: 1.2em;
  }
  #join, #poo, #dex {
    font-size: 800%;
  }
}

@media (min-width: 700px) and (max-width: 739px) {
  * {
    font-size: 45%;
  }
  #icon {
    width: 1.8em;
  }
  #tg {
    width: 1.3em;
  }
  #join, #poo, #dex {
    font-size: 600%;
  }
}

@media (min-width: 740px) and (max-width: 767px) {
  * {
    font-size: 50%;
  }
  #icon {
    width: 2.7em;
  }
  #tg {
    width: 1.4em;
  }
  #join, #poo, #dex {
    font-size: 500%;
  }
}

@media (min-width: 768px) and (max-width: 833px) {
  * {
    font-size: 65%;
  }
  #icon {
    width: 1.5em;
  }
  #tg {
    width: 1.8em;
  }
  #join, #poo, #dex {
    font-size: 400%;
  }
}

@media (min-width: 834px) and (max-width: 899px) {
  * {
    font-size: 75%;
  }
  #icon {
    width: 2.1em;
  }
  #tg {
    width: 0.8em;
  }
  #join, #poo, #dex {
    font-size: 300%;
  }
}

@media (min-width: 900px) and (max-width: 1023px) {
  * {
    font-size: 80%;
  }
  #icon {
    width: 1.9em;
  }
  #tg {
    width: 0.8em;
  }
  #join, #poo, #dex {
    font-size: 300%;
  }
}

@media (min-width: 1024px) and (max-width: 1098px)  {
  * {
    font-size: 90%;
  }
  #icon {
    width: 1.8em;
  }
  #tg {
    width: 0.9em;
  }
  #join, #poo, #dex {
    font-size: 250%;
  }
}

@media (min-width: 1099px) and (max-width: 1199px)  {
  * {
    font-size: 95%;
  }
  #icon {
    width: 1.7em;
  }
  #tg {
    width: 1em;
  }
}

@media (min-width: 1200px) and (max-width: 1280px) {
  * {
    font-size: 100%;
  }
  #icon {
    width: 1.5em;
  }
  #tg {
    width: 0.8em;
  }
}

@media (min-width: 1281px) and (max-width: 1339px) {
  * {
    font-size: 100%;
  }
  #icon {
    width: 1.6em;
  }
  #tg {
    width: 0.8em;
  }
}

@media (min-width: 1340px) and (max-width: 1399px)  {
  * {
    font-size: 115%;
  }
  #icon {
    width: 1.3em;
  }
  #tg {
    width: 1.1em;
  }
}

@media (min-width: 1400px) and (max-width: 1649px)  {
  * {
    font-size: 125%;
  }
  #tg {
    width: 1.1em;
  }
}


@media (min-width: 1650px) and (max-width: 1919px)  {
  * {
    font-size: 140%;
  }
  #tg {
    width: 1.3em;
  }
}

@media (min-width: 1920px) and (max-width: 2879px) {
  * {
    font-size: 150%;
  }
  #tg {
    width: 1.5em;
  }
}
@media (min-width: 2880px) and (max-width: 3839px) {
  * {
    font-size: 180%;
  }
  #icon {
    width: 2.2em;
  }
  #tg {
    width: 1.7em;
  }
}
@media (min-width: 3840px) {
  * {
    font-size: 220%;
  }
  #icon {
    width: 2.4em;
  }
  #tg {
    width: 1.9em;
  }
  #comm {
    font-size: 300%;
  }  
}

我之所以选择这些尺寸，是因为我在 Google 上搜索了“移动设备显示分辨率列表”，这样我就可以确保在测试以这些尺寸查看的网站时，它仍会按预期显示。

就像我说的，当我缩小“F12 中的可视框”时，字体大小的变化很顺利......但是如果我把它精确地放在分辨率宽度 767px 上，就好像媒体查询没有'不存在并且我的文本变为 100%，这对于小显示尺寸来说当然太大了。

我点击了“设备工具栏”中的“更多选项”，然后 select 编辑了“显示媒体查询”，这会在工具栏顶部显示一些彩色条，显示媒体查询所在的位置调整显示区域的大小。我可以在顶部看到媒体查询不存在的两个空白，分别为 699px、767px、833px、899px 和 1023px。尽管我的媒体查询中明确涵盖了这些数字（在“最大宽度：”部分），但媒体查询不适用于这些数字。一开始我以为是语法问题，但我作为最大宽度包含的其他数字：维度不会恢复到 100%，所以我无法破译任何一致的内容来理解问题所在。

当我们使用圆括号而不是方括号表示我们不在解决方案集中包含数字时，它会在数学中查找。你知道，[0,35) 是如何表示从 0 到 0 但不包括 35。除了我认为 CSS 不是这样使用方括号和圆括号。而且我在任何地方都没有任何其他媒体查询。

我尝试使用“!important”来指定要将字体更改为什么大小，然后在我写这篇文章时 post 我尝试将媒体查询中的数字从 767px 更改为 767.9999999px 并且行得通.... 大白眼

那么数字 699、767、833、899 和 1023 是被 CSS 沮丧的讽刺 禁止的还是什么？没看懂。

等等......这不是什么愚蠢的事情，比如你不能在媒体查询中使用奇数之类的，对吧？因为它没有说我能看到的任何地方，我用谷歌搜索了不同的网站，并在媒体查询中提到了 3 个不同的 YouTube 视频。

问题 2) 屏幕上总共有 4 个部分显示文本。大部分文字由徽标图像作为 3 行文本中每一行的“要点”。当我通过媒体查询并应用字体大小更改时，项目符号图像也会缩放......但速度要快得多所以我不得不增加图像的大小以使其缩小得更慢才能仍然是与我检查每个媒体查询大小的文本相同的比例大小。所以我检查了每个媒体查询并正确地补偿了图像....但是现在，其中一行文本（带有 id 的

；所以我知道我也没有不小心在某处引用它else) 比图像收缩得更快……不知道到底发生了什么。我确保在我的 CSS 页面的 HTML 部分使用 16px 作为字体大小，并且我在其他地方使用“em”单位。我搞不清楚了。我将 post 剩余的 CSS 代码放在这里。

* {
  margin:0;
  padding:0;
  border: 0;
  overflow: hidden;
}
canvas {
  position: fixed;
  width: 100%;
  height:100%;
  display:block;
  top: 0;
  left: 0;
}

html, body {
  height: 100vh;
  width:100%;
  overflow: hidden;
  margin: 0px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: rgb(255, 255, 255);
}


.slide1 {
  position: absolute;
  z-index:1;
  top: 55%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 100vw;
  height:100vh;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.slide1 h2 {
  position:absolute;
  top:7%;
  left: 18%;
  font-size: 3em;
  font-weight: bold;
  display: inline-block;
}
.slide1 #p1 {
  position: absolute;
  top: 24%;
  left: 18%;
  font-size: 2.3em;
  font-weight: bold; 
}
.slide1 #p2 {
  position: absolute;
  top: 42%;
  left: 18%;
  margin: 0 auto;
  display: inline-block;
  font-size: 2.3em;
  font-weight: bold;
  /* text-align: left; */  
}
.slide1 #p3 {
  position: absolute;
  top: 60%;
  left: 18%;
  margin: 0 auto;
  display: inline-block;
  font-size: 2.3em;
  font-weight: bold;
}
.slide2 {
  position: absolute;
  z-index:1;
  /* transform: translate(0, -50%); */
  width: 100vw;
  height: 100vh;
  clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%);
}
.slide2 h2 {
  position: absolute;
  top: 12%;
  left: 27.5%;
  font-size: 3em;
  font-weight: bold;
}
#contract {
  position: absolute;
  top: 30%;
  left:13%;
  font-size: 2.1em;
  font-weight: bold;
  display: inline-block;
}
#clip {
  width:1em;
}
#icon {
  width:1.3em;
  vertical-align:middle;
}
#erc {
  position: absolute;
  top: 48%;
  left:13%;
  font-size: 2.1em;
  font-weight: bold;
}
#buy {
  position: absolute;
  top: 66%;
  left:13%;
  font-size: 2.1em;
  font-weight: bold;
}

#contracts {
  display: none;
  position:absolute;
  top:auto;
  width: 1px;
  height: 1px;
  overflow:hidden;
}

.slide3 {
  position: absolute;
  z-index:1;
  width: 100vw;
  height: 100vh;
  clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%);
}
.slide3 h3 {
  position: absolute;
  top: 18.5%;
  left: 42%;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
}
#info {
  position:absolute;
  top: 35%;
  left:31%;
  margin: 0 auto;
  font-size: 2.3em;
  font-weight: bold;
}
#poo {
  position:absolute;
  top: 50%;
  left:21%;
  margin: 0 auto;
  font-size: 2.3em;
  font-weight: bold;
}
#dex {
  position:absolute;
  top: 70%;
  left:21%;
  margin: 0 auto;
  font-size: 2.3em;
  font-weight: bold;
}

.slide4 {
  position: absolute;
  z-index:1;
  top: 35%;
  transform: translate(0, -50%);
  text-align: center;
  width: 100vw;
  height:100vh;
  clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
}

.slide4 h4 {
  position:absolute;
  top:30%;
  left:38%;
  font-size: 3em;
  font-weight: bolder;
}
#comm {
  position: absolute;
  top: 52%;
  left: 28%;
  font-size: 2.3em;
  font-weight: bold;
}

#join {
  position: absolute;
  top:70%;
  left: 30%;
  font-size: 2.3em;
  font-weight: bold;
}

#tg {
  width:1.1em;
}

我的 HTML 代码中没有样式，因此 HTML 中不应有任何冲突的字体大小或图像大小。

有人能帮我理解一下吗？谢谢！

Answer 1

spec 表示由于缩放、hidpi 等原因，视口宽度可能会被计算为分数值，因为您的媒体查询指定了有界范围，并且这些范围之间存在空洞，因此有可能某些视口根本不匹配任何媒体查询。

因为您在每个媒体查询中使用了相同的选择器和规则集，所以您根本不需要 max-width；只需使用 min-width 并让 CSS 引擎完成剩下的工作。

Answer 2

您应该 post 访问该站点 link。一张图片值1000字。否则我看不出 CSS 断点是如何调整渲染器大小的讨论。

始终在 html/body 元素上声明 rem，然后主要将 ems/rems 用作常量变量。如果使用错误的单位组合，比例关系可能会出现反义ui。

就媒体查询而言，断点会让您抓狂：分辨率、实际像素、方向、dpi、用户规模、操作系统、浏览器、ui chrome、设备类型。 You should use a snippet, or a library that rebrands a snippet.

CSS 媒体查询在 5 个特定分辨率大小时中断....什么？

CSS media queries break at 5 specific resolution sizes....what?

html

css

media-queries