css如何监听屏幕的旋转？

在前端开发中，CSS本身并不能直接监听屏幕的旋转事件。不过，你可以使用JavaScript的window对象来监听resize或orientationchange事件，这些事件会在屏幕旋转时触发。

1. 使用resize事件:
   当浏览器窗口的大小发生变化时，resize事件会被触发。这包括屏幕的旋转，因为旋转通常会导致视口（viewport）的尺寸变化。

window.addEventListener('resize', function() {
  console.log('屏幕尺寸已变化，可能发生了旋转。');
  // 你可以在这里添加处理旋转的逻辑
});

需要注意的是，resize事件也会在用户调整浏览器窗口大小时触发，所以你可能需要添加一些额外的逻辑来判断是否真的是屏幕旋转。
2. 使用orientationchange事件:
这个事件专门针对设备的屏幕方向变化。它会在用户旋转设备，导致屏幕方向从横屏变为竖屏（或反之）时触发。

window.addEventListener('orientationchange', function() {
  console.log('屏幕方向已变化。');
  // 你可以在这里添加处理旋转的逻辑
  // 可以使用 window.orientation 来获取当前的屏幕方向
});

window.orientation属性可以提供关于屏幕方向的信息。不过，需要注意的是，这个属性在一些现代浏览器中可能已经不再支持，因为它被认为是一个过时的特性。因此，在使用它之前，请确保检查你的目标浏览器是否支持这个属性。

综上所述，你可以根据项目的具体需求选择使用resize事件还是orientationchange事件来监听屏幕的旋转。如果需要更精细的控制，或者要处理更复杂的场景，你可能还需要结合使用CSS的媒体查询（Media Queries）来根据设备的屏幕方向应用不同的样式。