css去取得窗口宽度

CSS中使用“width”属性可以设置HTML元素的宽度。但是如何获取浏览器窗口的宽度呢？

@media screen and (max-width: 768px) {
    /* 在屏幕宽度小于768px时应用这个样式 */
}

上面的代码中使用了@media查询，其中“max-width”属性指定了屏幕最大宽度为768px。可以通过这种方式去检测浏览器窗口的宽度，从而应用相应的CSS样式。

body {
    width: 100%;
    max-width: 768px;
}

除了@media查询外，还可以使用“max-width”属性来设置HTML元素的最大宽度。在上述代码中，“body”元素的最大宽度为768px，这意味着当浏览器窗口大小小于768px时，页面宽度将受到限制。

window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

还可以使用JavaScript代码获取浏览器窗口的宽度。上面的代码可以在大多数浏览器上工作，其中“window.innerWidth”属性获取浏览器窗口的宽度，“document.documentElement.clientWidth”获取文档的宽度，而“document.body.clientWidth”获取文档主体的宽度。

总之，无论你使用什么方式获取浏览器宽度，在编写响应式设计时都非常重要。通过使用这些技巧，可以更好地适应不同的屏幕大小和设备类型。