[分享]css关键字判断不同设备

CSS的关键字可以让我们根据不同的设备显示不同的样式。比如，我们可以使用media关键字来指定当设备宽度小于768像素时应用的样式。media only screen and (maxwidth: 7...

CSS的关键字可以让我们根据不同的设备显示不同的样式。比如，我们可以使用@media关键字来指定当设备宽度小于768像素时应用的样式。

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

在这个示例中，我们使用了@media only screen关键字来指定这个样式应仅适用于屏幕设备，而(max-width: 768px)则是对设备宽度进行限制。如果设备宽度小于768像素，则body元素的背景颜色将变成浅蓝色。

另一个常用的CSS关键字是orientation。这个关键字可以让我们根据设备的方向来应用不同的样式。比如，在竖直方向时，我们可以让元素呈现一列，而在水平方向时则让它们呈现一行。

@media (orientation: landscape) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}
@media (orientation: portrait) {
  .container {
    display: block;
  }
} 

在这个示例中，我们使用@media关键字来指定当设备处于横屏模式时应用的样式和当设备处于竖屏模式时应用的样式。在横屏模式时，.container元素将呈现为一行内包含多个元素，而在竖屏模式时则将呈现为一列。

总之，利用CSS关键字可以使我们的网站在不同设备上呈现出更为优秀的效果，提高用户的体验。