你可能不了解的CSS容器查询！！-猿码集

了解CSS容器查询

CSS容器查询在响应式设计中扮演着重要角色。最近，CSS Container Queries模块已成为CSS Working Group的一部分。在这篇文章中，我们将了解CSS容器查询并讨论其重要性。

理解CSS容器查询

CSS容器查询是一种新的功能，用于基于其容器的宽度，高度，比例等属性，通过CSS样式和规则对单独的区块进行定位和格式化。这为开发人员提供了一种更加灵活和精确地控制元素外观的方法，而不是基于视口大小或媒体查询来实现响应设计。

基本语法：

在定义CSS容器查询规则时，您需要使用@container和规则块。规则块中包含与相应容器相关的任何CSS代码。


@container (min-width: 640px) {
  .container {
    width: 100%;
    max-width: 600px;
  }
}

在上面的示例中，我们针对容器宽度最小值为640px的类容器应用规则。在CSS容器查询中，我们可以使用min-width、max-width、min-height以及max-height作为容器查询条件。

为什么需要CSS容器查询

CSS容器查询可以有效地解决设备尺寸的问题，使网页更加响应式，从而为Web开发人员提供更多控制元素外观的方式。通过定位和格式化独立的区块，可以将用户体验提升到一个更高的水平。

CSS容器查询旨在消除媒体查询的主要限制，即它们只能基于视口维度而不是元素容器的属性来实现响应式设计。使用CSS容器查询，可以更加高效地执行响应式样式，并在特定条件下提高样式。

CSS容器查询的应用场景

CSS容器查询可以在以下几个方面被广泛应用：

1.各种不同的屏幕尺寸下的图片：

设备的高度和宽度不同，因此为了避免大型图像在所有屏幕上均显示不佳，可以使用CSS容器查询调整图像大小。


@container (max-width: 320px) {
  .img {
    height: 210px;
    width: 140px;
    margin: 10px auto;
  }
}
@container (min-width: 321px) and (max-width: 767px) {
  .img {
    height: 360px;
    width: 240px;
    margin: 20px auto;
  }
}
@container (min-width: 768px) {
  .img {
    height: 400px;
    width: 300px;
    margin: 30px auto;
  }
}

2.在响应式导航中隐藏或显示项目：

有时候，我们需要在不同设备上显示或隐藏一些导航选项。设备的大小可能是一个因素，但可能存在其他更多的因素，例如容器的高度或宽度，等等。在这种情况下，CSS容器查询将非常有用。


@media screen and (min-width: 320px) and (max-width: 767px) {
  .nav li {
    display: none;
  }
}
@container (min-width: 320px) and (max-width: 767px) {
  .nav li:first-child {
    display: block;
  }
}
@container (min-width: 768px) {
  .nav li {
    display: block;
  }
}

3.网站标题的栅格布局：

您可以使用CSS容器查询来调整栅格容器的大小和显示方式。在下面的示例中，我们将使用CSS容器查询来定义栅格展示方式。


@container (max-width: 767px) {
  .grid {
    display: block;
  }
}
@container (min-width: 768px) and (max-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 5fr;
  }
}
@container (min-width: 1025px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 7fr;
  }
}

CSS容器查询的一些限制

尽管CSS容器查询可以极大地提高网站的响应性和控制灵活性，但它仍存在一些限制。

1.浏览器支持性

CSS容器查询在浏览器中得到的支持有限。到目前为止，只有Chrome浏览器从版本90开始支持它。Firefox、Edge和Safari也有计划支持它。

2.CSS容器查询的性能

CSS容器查询在性能方面可能会有问题。因为浏览器需要在一定时间内检查容器的任何变化，所以它们可以影响网站的速度。

结论

CSS容器查询是一种强大而灵活的方法，用于实现响应式设计。它为开发人员提供了对元素更精确的控制，可以轻松地控制响应性样式。虽然它目前仍存在一些限制，但是随着浏览器支持的增加和特定问题的解决，它将在未来成为网站开发的重要组成部分。

你可能不了解的CSS容器查询！！