窗口宽度- CSS vs javascript

Question

<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">

JS

var a = window.outerWidth;
console.log(a); // 711

根据切换样式表时的javascript计算，media700用于711px而不是700px的窗口宽度

Answer 1

只需使用innerWidth，您将看到它们共享相同的值。

一旦你达到700px或更低，你会看到文本700px使用css媒体查询和背景变化与js。

在全页视图中调整演示的大小。

---

jsfiddle

---

$(window).on("resize", function() {
  var innderWidth = $(this).innerWidth();
  $("span").text(innderWidth + "px");
  if (innderWidth <= 700) {
    $("body").css("background-color", "gold");
  } else {
    $("body").css("background-color", "");
  }
});

body {
  margin: 0;
}
p {
  margin: 0;
  background-color: dodgerblue;
  font-size: 3em;
}
@media (max-width: 700px) {
  body::after {
    font-size: 10em;
    content: "700px";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Window inner width: <span></span>
</p>

Answer 2

假设你的问题是"为什么"，既然你刚才说了这些话:

从MDN:

窗口。outerWidth获取浏览器窗口外部的宽度。它表示整个浏览器窗口的宽度包括侧边栏(如果展开)，窗口chrome和窗口大小调整边框/句柄。

也来自MDN:

宽度媒体特性描述了输出设备渲染面的宽度(例如文档窗口的宽度，或者打印机页面框的宽度)。

11px的差异是窗口框架，滚动条等