在前端开发中，我们经常需要根据设备屏幕大小改变元素的样式或者行为。这时候，我们通常会用到CSS媒体查询和JavaScript窗口宽度来实现。然而，在某些情况下，这两种方法得到的窗口宽度却不一致，导致我们的页面无法正常工作。
原因分析
这个问题的原因是由于CSS和JavaScript获取窗口宽度的方式不同所致。具体来说，CSS计算窗口宽度的时候，包括了滚动条的宽度；而JavaScript计算窗口宽度的时候，不包括滚动条的宽度。因此，当页面存在滚动条的时候，就会出现CSS媒体查询和JavaScript窗口宽度不匹配的情况。
下面是一个示例代码，演示了这个问题：
--------- -----
------
------
----- ----------------
----------------------
-------
---- -
------- --
-
---------- -
------ -----
------- ------
----------------- -----
-
------ ----------- ------ -
---------- -
----------------- ----
-
-
--------
--------
-------- ---------------- -
------ ------------------
-
------------------------------
---------
-------
------
---- ------------------------
-------
-------在这个示例中，我们定义了一个容器元素，并使用CSS媒体查询来改变其背景颜色。同时，我们还使用JavaScript获取了窗口宽度并输出到控制台上。
如果你在浏览器中打开这个页面，并缩小窗口大小，你会发现当窗口宽度小于768px的时候，容器元素的背景颜色应该变成蓝色。但是，实际情况下容器元素的背景却变成了红色，因为CSS计算窗口宽度的时候包括滚动条的宽度，而JavaScript计算窗口宽度的时候不包括滚动条的宽度，导致两者计算出来的值不同。
解决方法
要解决这个问题，我们可以采用以下两种方法：
方法一：使用window.matchMedia
window.matchMedia是一个JavaScript API，可以检查当前文档是否匹配给定的CSS媒体查询。通过使用这个API，我们可以避免使用窗口宽度来判断设备屏幕大小，从而解决CSS媒体查询和JavaScript窗口宽度不匹配的问题。下面是一个示例代码：
--------- -----
------
------
----- ----------------
----------------------
-------
---- -
------- --
-
---------- -
------ -----
------- ------
----------------- -----
-
------ ----------- ------ -
---------- -
----------------- ----
-
-
--------
--------
----- ---------- - ------------------------------ ---------
-------- -------------------- -
-- ----------- -
------------------- ---- -- -- ----- ----- -------
- ---- -
------------------- ---- -- ---- ---- ----- -------
-
-
------------------------------------- -------------------
------------------------------
---------
-------
------
---- ------------------------
-------
-------在这个示例
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14839