[分享]css中如何获取当前屏幕大小

CSS中获取当前屏幕大小是一个非常常用的技能，可以用于响应式设计与布局的实现。下面就为大家介绍两种常用的方法：1. 使用media查询media screen and (maxwidth: 768px...

CSS中获取当前屏幕大小是一个非常常用的技能，可以用于响应式设计与布局的实现。下面就为大家介绍两种常用的方法：

1. 使用@media查询

@media screen and (max-width: 768px) {
  body {
    background-color: yellow;
  }
} 

在这个例子中，我们使用了@media查询来检测屏幕宽度是否小于等于768px，如果是，则为body设置了黄色的背景色。

缺点：只能检测宽度是否小于等于某个值，不够灵活。

2. 使用JavaScript

var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight; 

这两行代码可以获取当前屏幕的宽度和高度，可以根据不同的屏幕大小进行不同的CSS样式操作。

缺点：需要使用JavaScript代码，在一些要求不使用JavaScript的场景下可能不适用。

总结：

在实际开发中，根据具体需要选择不同的方法来获取当前屏幕大小。如果需要响应式布局，建议使用第二种方法，可以更灵活地处理不同屏幕大小的情况。