旅游网站建设报价单,抖音推广渠道有哪些,网络营销推广机构,肇庆做网站我们做开发经常会遇到这样的一个需求#xff0c;要开发一个响应式的网站#xff0c;但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询#xff08;Media Queries#xff09;检测的是视窗的宽高#xff0c;根本无法满足我们的业务需求要开发一个响应式的网站但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询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。
