html - 使用缩放时宽度如何影响？

Question

引用代码:http://codepen.io/anon/pen/VvdyQb?editors=010

我很难理解放大/缩小时视口(viewport)的宽度如何变化。我有这些媒体查询，它们在 em 的宽度发生变化时触发。

我的问题:为什么缩放时视口(viewport)会发生变化？它与字体大小的增加/减少有关吗？ em 用于父容器的字体大小。如果 body 元素默认字体大小为 16px，则 1em=16 像素。当我缩放时这会发生什么变化？ 1em 是否突然不再等于 16px 而是更大/更小取决于我放大多少？我假设文本大小也会影响父容器的大小，但我无法理解这如何影响页面的整体宽度。宽度与缩放和 em 有何关系？看起来页面的宽度在放大时变小，在缩小时变大？

html,
body {
  background-color: lightblue;
}
div#nav {
  position: relative;
  width: 50%;
  background: white;
  box-shadow: 1px 1px 15px #888888;
}
div#logo {
  border-right-style: solid;
  border-width: 1px;
  border-color: rgba(0, 0, 0, 0.15);
  font-family: 'Myriad Pro Regular';
  font-weight: normal;
  color: #1E3264;
  font-size: 2em;
}
@media (min-width: 50em) and (max-width: 99em) {
  #logo {
    background: orange;
    font-size: 0px;
  }
}
@media (min-width: 100em) and (max-width: 149em) {
  #logo {
    display: none;
  }
}
@media (min-width: 150em) {
  #logo {
    display: initial;
  }

<div id="nav">
  <div id="logo">TEST</div>
</div>

Answer 1

您使用的样式或媒体查询存在严重缺陷。首先，您必须对媒体查询有一个非常清晰的概念。

min-width

min-width 表示您的容器宽度是否至少等于或大于此宽度。在响应式设计中，您根据要运行查询的最大范围进行设计。所以 max-width 是这种情况下的正确选择。 min-width 基本上用于间隔。就像如果您想专门在 20em 和 30em 之间运行查询，那么您将使用 max-width:30em 和 min-width:20em
但是，如果您想运行最大 20em 范围的查询，则必须在查询中使用 max-width:20em。
而且在响应式设计的情况下，最好使用px。因为 em 与比例大小有关。但是您必须为媒体查询提供绝对范围。我希望这对你有很大帮助。