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

问题描述

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

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

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

当设备宽度分辨率为

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

不断...

这是代码...



@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%，这对于小显示器尺寸来说当然太大了。

我单击“设备工具栏”中的“更多选项”并选择“显示媒体查询”，这会在工具栏顶部显示一些彩色条，显示当您调整显示区域大小时媒体查询所在的位置。我可以在顶部看到媒体查询不存在的两个间隙，即 699px、767px、833px、899px 和 1023px。即使我的媒体查询中明确涵盖了这些数字（在“最大宽度：”部分），媒体查询也不适用于这些数字。起初我认为这是语法，但我作为 max-width: 尺寸包含的其他数字不会恢复到 100%，所以我无法破译任何一致的东西来理解问题所在。

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

我尝试使用“！important”来指定将字体更改为的大小，然后在我写这篇文章时，我尝试将媒体查询中的数字从 767px 更改为 767.9999999px 并且有效....

那么数字 699、767、833、899 和 1023 是被 CSS讽刺禁止的，还是什么？我不明白。

等等......这不是你不能在媒体查询中使用奇数或类似的东西，对吧？因为它没有说我能看到的任何地方，我用谷歌搜索了不同的网站，并在媒体查询中引用了 3 个不同的 youtube 视频。

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

带身份证；所以我知道我也没有不小心在其他地方提到它）缩小甚至比图像还要快......我知道到底发生了什么。我确保在我的 CSS 页面的 HTML 部分中使用 16px 作为字体大小，并且我在其他任何地方都使用了“em”单位。我搞不清楚了。我将在此处发布其余的 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 中的字体大小或图像大小不应该有任何冲突。

有人可以帮我理解这个吗？谢谢！

标签： htmlcssmedia-queries

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

问题描述

解决方案

推荐阅读