JS 屏幕宽度|极客笔记

JS 屏幕宽度

在网页开发过程中，我们经常需要获取用户设备的屏幕宽度，以便进行页面布局的响应式设计。在 JavaScript 中，我们可以通过一些方法来获取屏幕宽度，并根据它来动态地调整页面布局。

使用 `window.screen` 对象获取屏幕宽度

JavaScript 提供了 window.screen 对象，该对象包含了有关用户屏幕的信息，包括屏幕的宽度、高度和像素密度等。我们可以通过访问该对象的属性来获取屏幕的宽度。

以下是一段代码，用以获取屏幕宽度并输出到控制台：

let screenWidth = window.screen.width;
console.log("屏幕宽度：" + screenWidth + "px");

运行以上代码后，在浏览器的控制台中会打印出屏幕的宽度，单位为像素（px）。

使用 `window.innerWidth` 获取视口宽度

除了 window.screen 对象外，我们还可以使用 window.innerWidth 属性来获取当前窗口（视口）的宽度。不同于 window.screen.width 返回的是整个屏幕的宽度，window.innerWidth 则返回的是浏览器视口的宽度，即实际可见内容的宽度。

let viewportWidth = window.innerWidth;
console.log("视口宽度：" + viewportWidth + "px");

上述代码将输出当前浏览器窗口的宽度，通常情况下等于浏览器可视区域的宽度。

使用媒体查询响应不同屏幕宽度

除了通过 JavaScript 来获取屏幕宽度外，我们还可以使用 CSS 的媒体查询来实现对不同屏幕宽度的响应。通过在样式表中定义不同屏幕宽度下的样式，可以使页面在不同设备上呈现不同的布局。

以下是一个简单的示例，当屏幕宽度小于 768px 时，设置页面背景色为灰色；当屏幕宽度大于等于 768px 时，设置页面背景色为白色。

@media (max-width: 768px) {
    body {
        background-color: #f0f0f0;
    }
}

@media (min-width: 769px) {
    body {
        background-color: #ffffff;
    }
}

通过使用媒体查询，我们可以轻松实现页面在不同屏幕宽度下的布局切换。