css不同设备横屏竖屏

CSS是网页开发中重要的技术之一，可以通过CSS让网页有更好的外观和用户体验。而随着移动设备的普及，不同设备的横屏竖屏显示成为了一个新问题。

在CSS中，我们可以使用@media规则来针对不同的设备尺寸和方向设置不同的样式。例如：

@media screen and (max-width: 768px) {
  /* 在768px以下的设备使用的样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) {
  /* 在769px及以上的设备使用的样式 */
  body {
    font-size: 18px;
  }
}

@media screen and (orientation: landscape) {
  /* 横屏显示的样式 */
  body {
    background-color: #ecf0f1;
    color: #2c3e50;
  }
}

@media screen and (orientation: portrait) {
  /* 竖屏显示的样式 */
  body {
    background-color: #2c3e50;
    color: #ecf0f1;
  }
} 

在上面的例子中，我们通过@media和一些CSS属性来控制不同设备的样式。

首先，我们通过max-width和min-width来设置在宽度为768px以下和768px及以上的设备上使用不同的字体大小。

然后，我们通过orientation属性来判断设备的横屏或竖屏状态，并为其设置不同的背景颜色和文字颜色。

通过这些CSS代码，我们可以让网页在不同设备和方向下有不同的样式，从而提高用户体验。