介绍

在创建网站时，您需要确保您的网站响应迅速，并且在任何宽度的每个设备中都可以正常运行。使用@Media屏幕可以使您的网站响应迅速，并帮助您的网站提高效率，并允许网站列出SEO更高等级。

在这篇博客文章中，我们将涵盖有关CSS中@Meda查询的基本基础，让我们开始！

了解@Media

让我们了解CSS中的@Media。好吧，这使开发人员可以为特定定义的宽度指定特定组件。让我们说我们希望<div class="container">Hello there 👋!</div>在设备移动时具有背景颜色（我知道这是没有意义的，但仍然是），我们希望

在用户在手机中打开网站时具有背景颜色，因此我们使用@Media来指定将背景颜色属性应用于.container的宽度，应有多少宽度。让我们看看@Media的语法，然后将SE示例。

句法

显示宽度

@media screen and (max-width: 768px) {
  /* Styles here for the device with width of 768px */
}

在此@Media中，我们定义的是，如果宽度小于768px，则@Media内部的代码将执行。我们为设备提供了最大宽度，以应用@Media内部的样式。

当宽度小于768px

时

当宽度大于或等于768px

时

显示高度

就像宽度一样，我们也可以使用@Media进行显示高度

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

查看CODPEN示例7/P> 7

是的，这是CSS中@Media屏幕的最基本知识，如果您有任何查询可以随意发表评论，谢谢您的阅读！