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

Question

参考代码：http://codepen.io/anon/pen/VvdyQb?editors=010

我很难理解缩放时视口的宽度如何变化 in/out。当 em 中的宽度发生变化时，我有这些媒体查询。

我的问题：为什么缩放时视口会发生变化？它与字体大小increasing/decreasing有关吗？ em 用于父容器的字体大小。如果 body 元素默认字体大小为 16px，则 1em=16 像素。当我缩放时这会发生什么变化？ 1em 突然不再等于 16px 而是 bigger/smaller 取决于我放大多少？我假设文本大小也会影响父容器的大小，但我无法理解这如何影响页面的整体宽度。宽度与缩放和 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 and min-width:20em
但是如果你想运行查询最大 20em 范围，那么你必须在你的查询中使用 max-width:20em。
而且在响应式设计的情况下，最好使用px。因为 em 与比例大小有关。但是您必须为媒体查询提供绝对范围。我希望这对你有很大帮助。

Answer 2

兄弟，em 是相对长度参数，它使用已经声明的绝对字体大小。同样重要的是你要知道 em 不是等于 16px 的绝对长度参数。 16px 是 chrome 或您使用的任何浏览器的默认绝对字体大小。当您使用 1em 时，似乎 1em = 16px。但事实并非如此。
如果您在样式化内容之前设置默认值，例如设置 html{ font-size:20px; }，那么您将在容器中使用 1 em 的任何地方，它等于 20px。所以 em 按比例取决于默认的绝对字体大小。这不是确切的值。

Answer 3

缩放不会影响基于 em 的媒体查询。也不会更改根 HTML 元素上的 font-size（但是，这会影响 css 中其他地方的 em 大小，例如子元素上的字体大小）。

1em 通常等同于媒体查询中的 16px，除非用户在浏览器首选项中覆盖了浏览器的默认字体大小。通常，浏览器的默认字体大小是 16px，但是如果他们将其设置为 24px，那么 1em 将等于 24px；您的 50em 断点相当于 1200px (50 x 24px) 而不是 800px (50 x 16px)。

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

How is the width effected when using zoom?

html

css

zooming

media-queries

web