@media屏幕单位不是像素，那么它们是什么？

Question

这就是我想要的

如果浏览器大于900px，我希望这些方框为700px。 一旦浏览器宽度小于900px，我希望盒子为600px。

@media screen and (min-width : 750px) and (max-width : 900px) {
    .multiSelect .checkboxLayer {
        width: 600px;
    }
}
@media screen and (min-width: 900px) {
    .multiSelect .checkboxLayer {
        width: 700px;
    }
}

我的问题是，为什么浏览器宽度分为932px而不是900px？ 如果不是像素，这些是什么单位？

我只是尝试使用photoshop测量浏览器宽度，并且它精确地以975像素分割。

所以CSS表示900 px，Chrome表示932像素，而photoshop表示975像素 这真令人困惑？！？！

Answer 1

答案简短：

您尚未重置父容器的box-sizing属性。

答案很长：

考虑一下：

  

在CSS中，默认情况下，分配给元素的宽度和高度仅应用于元素的内容框。如果元素有任何边框或填充，则会将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。

box-sizing中有两个您应该了解的值

1. 内容框

     

   [...]默认值，并为您提供默认的CSS框大小调整行为。如果你   将元素的宽度设置为100像素，然后是元素的内容框   将是100像素宽，任何边框或填充的宽度将   被添加到最终渲染宽度。

2. <强>边界框

     

   [...]告诉浏览器说明中的任何边框和填充   您为宽度和高度指定的值。如果设置元素的宽度   到100像素，100像素将包括任何边框或填充你   添加，内容框将缩小以吸收额外的宽度。   这通常使元素的大小更容易。

我通常使用以下内容启动任何CSS表格以避免此类问题

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

有许多框架可以重置更多默认属性，例如normalize.css，但我通常不需要使用它们。

我在下面设置了一个演示。有两个div个元素。还有一个媒体查询。

这两个元素在width中具有相同的固定 px。唯一的区别是box-sizing

的值

第一个设置为border-box，第二个设置为content-box

div {
  width: 400px;
  height: 400px;
  margin: 3em;
  text-align: center;
  background: darkred;
  border: 20px solid #131418
}

@media (max-width: 800px) {
  div {
    background: darkgreen;
    width: 300px;
  }
}

.first {
  box-sizing: border-box
}

.second {
  box-sizing: content-box
}

<div class="first"></div>
<div class="second"></div>

请注意，即使两者的width相同，它们也会以不同的大小呈现？

Answer 2

大多数浏览器的滚动条宽度为17像素，并且不会影响屏幕宽度。尝试在开发工具中使用Firefox的响应式设计模式。