Question

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

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

我的问题：当缩放时，为什么视口会改变？是否与字体大小增加/减少有关？ em用于父容器的font-size。如果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 and min-width:20em
但是，如果要运行最大20em范围的查询，则必须在查询中使用max-width:20em。
在响应式设计的情况下，更好地使用px。因为em与比例大小有关。但是你必须为媒体查询提供绝对范围。我希望这对你有很大的帮助。

Answer 2

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

Answer 3

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

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

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

3 个答案: