首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >容器查询 cqw 和 CSS 数学函数 max

容器查询 cqw 和 CSS 数学函数 max

作者头像
Sb_Coco
发布2023-03-08 13:57:16
1.1K0
发布2023-03-08 13:57:16
举报
文章被收录于专栏:Coco的专栏Coco的专栏

在许久之前,曾经写过这样一篇文章 -- 不定宽溢出文本适配滚动。我们实现了这样一种效果:

  1. 文本内容不超过容器宽度,正常展示
  2. 文本内容超过容器的情况,内容可以进行跑马灯来回滚动展示

像是这样:

但是,之前的方案,有一个很明显的缺点,如果我们事先知道了容器的宽度,那么没问题,但是如果没法确定容器的宽度,也就文本宽度不确定,容器宽度也不确定的话,那么整个效果会有一点瑕疵

瑕疵在于,当时的 CSS 技术,其实没法判断当前文本内容长度是否超过了其容器宽度,导致即便文本没有没有超长,Hover 上去也会进行一个来回滚动,像是这样:

容器查询 cqw 和 CSS 数学函数 max

背景描述大概是这样,感兴趣的同学,可以简单翻看一下上午提到的文章 -- 不定宽溢出文本适配滚动

到今天,我们重新审视这个问题。看看到今天,我们可以如何更加简单便捷的解决这个问题!

首先,我们的问题其实可以抽象成:

  1. 判断文本宽度与容器宽度的大小差异,文本宽度是否大于容器宽度
  2. 如果超出,则设置来回位移动画,位移的幅度为容器宽度与文本宽度的差值

那么,我们一步一步来。

假设我们的 HTML 结构如下:

<div class="marquee">
	<span>Lorem ipsum dolor sit amet elit. Animi, aliquid.<span>
</div>

其中,div 为容器,span 为文本内容。同时,我们利用容器查询,设置父容器 marquee 为容器查询的容器,并且将基于容器的inline-size 维度。

.marquee {
	white-space: nowrap;
	container-type: inline-size;
}

继续,我们如何能够在 span 中得知,当前 span 的内容长度与父容器宽度谁比较大呢?

在之前,这是很难办到的,但是现在,我们有了 容器查询 后,可以靠容器查询单位 cqw 完成。

首先,什么是容器查询?容器查询它给予了 CSS,在不改变浏览器视口宽度的前提下,只是根据容器的宽度变化,对布局做成调整的能力。

对容器查询想了解更多的,可以戳:新时代布局新特性 -- 容器查询

容器查询带来了很多新的单位,其中有:

  • cqw 容器查询宽度(Container Query Width)占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px,则此时 1cqw 对应的计算值就是 10px。
  • cqh 容器查询高度(Container Query Height)占比。1cqh 等于容器高度的 1%。
  • cqi 表示容器查询内联方向尺寸(Container Query Inline-Size)占比。这个是逻辑属性单位,默认情况下等同于 cqw
  • cqb 容器查询块级方向尺寸(Container Query Block-Size)占比。同上,默认情况下等同于 cqh
  • cqmin 容器查询较小尺寸的(Container Query Min)占比。取 cqw 和 cqh 中较小的一个
  • cqmax 表示容器查询较大尺寸的(Container Query Min)占比。取 cqw 和 cqh 中较大的一个

本文,我们会运用到其中的 cqw,1cqw 等于容器宽度的 1%。那么,当前容器的宽度,其实就是 100 cqw。

那么:

  1. width: 100% ,对于 span 行内元素而言,其文本长度就是其整个的宽度,100% 代表的就是文本内容的长度
  2. width: 100cqw 表示的是设置了容器查询的 .marquee 的宽度(也就是父容器的宽度)

OK,有了 100%100cqw 怎么比较他们谁大谁小呢?其实我们的关键不是谁大谁小,而是:

  1. 如果当前容器的宽度(也就是文本宽度)大于父容器宽度,需要得到一个动画位置值
  2. 如果当前容器的宽度(也就是文本宽度)小于父容器宽度,无需动画,也就是动画位移值为 0

那么,我们的核心就变成了,0 与两个宽度差值的比较。刚好,CSS 中提供了比较大小数学函数 max()min()

关于 CSS 数学函数,你可以参考我的这篇文章 -- 现代 CSS 解决方案:CSS 数学函数

铺垫了这么久,最终,我们得到最为核心的一行代码:

max(100% - 100cqw, 0px)

当然,换一种思维,使用 min() 也是可以的:

min(100cqw - 100%, 0px)

如果 span 内容长度,大于容器宽度,也就是 100% - 100cqw 大于 0px,那么其实也就得到了跑马灯效果应该位移的距离。

我们顺便也就将整个效果的代码写完了,完整的代码:

.marquee {
	overflow: hidden;
	white-space: nowrap;
	width: 200px;
	resize: horizontal;
	container-type: inline-size;
}
.marquee span {
      animation: marquee 3s linear infinite both alternate;
}
@keyframes marquee {
	to {
		transform: translateX(min(100cqw - 100%, 0px));
	}
}

效果如下:

这样,到今天,我们可以轻易的实现:

  1. 文本内容不超过容器宽度,正常展示
  2. 文本内容超过容器的情况,内容可以进行跑马灯来回滚动展示

也就是如下的效果:

完整的代码,你可以戳这里:Pure CSS Marquee

当然,硬要说的话,本方案还是存在一个缺陷,就是动画的时长是固定的,没法根据内容的长短响应式的进行适配。可能更适合文本内容相差不大的场景使用。

最后

本案例 DEMO 由日服第一切图仔佐子哥倾情贡献。好了,本文到此结束,希望本文对你有所帮助 😃

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-03-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

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