前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >container的讲解

container的讲解

原创
作者头像
zayyo
发布2023-11-21 18:06:26
1620
发布2023-11-21 18:06:26
举报
文章被收录于专栏:zayyo前端zayyo前端

我们做开发经常会遇到这样的一个需求,要开发一个响应式的网站,但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询(Media Queries)检测的是视窗的宽高,根本无法满足我们的业务需求,这时我们常常会用到一个container属性,容器查询来实现我们的,元素样式跟随着我们的元素尺寸大小变化而变化。的业务需求。但是container是就要好几个属性可以使用的。今天我们就来好好介绍一下这几个属性。

container的属性介绍

container 是 container-type 和 container-name 的简写属性,用来显式声明某个元素是一个查询容器,并且定义查询容器的类型(由 container-type 指定)和查询容器的名称(由 container-name 指定,使用反斜杠(/)隔开。

container-type表示指向容器的类型,是水平方向的(对应宽度),还是包括垂直方向的(对应宽度和高度)。

语法如下:

代码语言:txt
复制
container-type: normal;
container-type: size;
container-type: inline-size;

其中normal是默认值,表示不建立容器元素,size表示水平和垂直方向都建立,inline-size是只在水平方向建立,会给元素同时应用layout、style和inline-size容器状态。

container-name的作用

container-name的作用是给容器元素命名,这个属性在页面中存在多个容器元素的时候,可以帮我们区分不同的容器属性,不至于搞混。

假设如下CSS代码:

代码语言:txt
复制
@container (max-width: 780px) {
   p {
    font-size: 20px;
  }
}

如果页面中存在多个容器元素,则这些元素中的 <p> 元素都会应用 font-size: 20px;,但我们的初衷可能就只有某一个容器元素才应用相关样式,此时container-name就很有作用了。

例如:

代码语言:txt
复制
.container-a {
    container: inline-size aside;
}
.container-b {
    container: inline-size banner;
}
@container banner (max-width: 480px) {
  p {
    font-size: 20px;
  }
}

此时,只有banner这容器元素内的 <p> 元素才会文字字号才会是20px

我正在参与2023腾讯技术创作特训营第三期有奖征文,组队打卡瓜分大奖!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • container的属性介绍
  • container-name的作用
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档