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

【问题标题】：How is the width effected when using zoom?使用缩放时宽度如何影响？
【发布时间】：2016-02-01 04:38:13
【问题描述】：

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

当我放大/缩小时，我很难理解视口的宽度是如何变化的。当 em 中的宽度发生变化时，我会触发这些媒体查询。

我的问题：为什么缩放时视口会发生变化？它与字体大小增加/减少有关吗？ 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>

【问题讨论】：

标签： html css web media-queries zooming

【解决方案1】：

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

min-width

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

【讨论】：

我对基于桌面的浏览器的缩放方面非常好奇。当我们放大和缩小时，Web 布局的宽度会发生什么变化，它与媒体查询的 em 有什么关系？ em 是字体大小的大小，我们知道当我们放大和缩小时文本会变得越来越小。基本字体是 1em = 16 像素。放大和缩小会改变 1 em 的含义吗？

【解决方案2】：

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

【讨论】：

是的，我明白这一点，但是当我们放大和缩小时，这一切有什么关系？因为我们放大的时候字体和原来设置的不一样。这对文本容器变大有何影响，对页面的整体宽度和具有一定宽度的媒体查询有何影响？

【解决方案3】：

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

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

【讨论】：