我们做开发经常会遇到这样的一个需求,要开发一个响应式的网站,但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询(Media Queries)检测的是视窗的宽高,根本无法满足我们的业务需求,这时我们常常会用到一个container
属性,容器查询来实现我们的,元素样式跟随着我们的元素尺寸大小变化而变化。的业务需求。但是container
是就要好几个属性可以使用的。今天我们就来好好介绍一下这几个属性。
container的属性介绍
container
是 container-type
和 container-name
的简写属性,用来显式声明某个元素是一个查询容器,并且定义查询容器的类型(由 container-type
指定)和查询容器的名称(由 container-name
指定,使用反斜杠(/
)隔开。
container-type
表示指向容器的类型,是水平方向的(对应宽度),还是包括垂直方向的(对应宽度和高度)。
语法如下:
container-type: normal;
container-type: size;
container-type: inline-size;
其中normal
是默认值,表示不建立容器元素,size
表示水平和垂直方向都建立,inline-size
是只在水平方向建立,会给元素同时应用layout、style和inline-size容器状态。
container-name的作用
container-name
的作用是给容器元素命名,这个属性在页面中存在多个容器元素的时候,可以帮我们区分不同的容器属性,不至于搞混。
假设如下CSS代码:
@container (max-width: 780px) {
p {
font-size: 20px;
}
}
如果页面中存在多个容器元素,则这些元素中的 <p>
元素都会应用 font-size: 20px;
,但我们的初衷可能就只有某一个容器元素才应用相关样式,此时container-name
就很有作用了。
例如:
.container-a {
container: inline-size aside;
}
.container-b {
container: inline-size banner;
}
@container banner (max-width: 480px) {
p {
font-size: 20px;
}
}
此时,只有banner
这容器元素内的 <p>
元素才会文字字号才会是20px
。