响应式文字大小：CSS 根据容器的大小自动调整字体大小

Honlnk

已于 2023-12-01 21:11:19 修改

阅读量4k

点赞数 33

分类专栏：前端文章标签： css 前端

于 2023-12-01 20:24:49 首次发布

本文链接：https://blog.csdn.net/hongying_18/article/details/134743075

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在编写页面时，我们经常需要适应不同的屏幕尺寸，这导致容器的大小会发生变化。有时候，我们希望容器内的文字大小也能够自动调整。幸运的是，有一个属性可以帮助解决这个问题。

container-type 查询容器的大小
cqw cqh 根据容器的大小调整文字的大小

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            resize: both; /* 设置容器可以在水平和垂直方向上调整大小。 */
            overflow: hidden;
            padding: 20px;
            background-color: #35dc54;
            container-type: size; /* 容器查询属性*/
        }
        p {
            font-size: 5cqw;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p>Hello,Wrod!!!!</p>
    </div>
</body>
</html>

container-type 有三个常用值分别是normal size inline-size

其中最为常用的是 inline-size 他的作用大致可以理解为监听盒子的横向轴如果横向轴的长度发生变化就会被监听到从而间接使页面发生改变
size 就是无论横向还是纵向都可以监听到

cqw相对单位
相对单位有很多比如vm vh % 等那cqw是相对于谁的呢？
cqw会查询这个容器的宽度进行百分比的计算这点有点类似于% 但是于%不同的是文字大小是不支持%的也就是说 font-size: 5%; 这样写的话是不生效的

与之一块的还有cqh 通过是高度进行计算

简单了解一下容器查询和 cqw单位这也就不难分析出
如果是 container-type的值是 inline-size的话那么就只有cqw会生效 cqh也不是不能用而是如果高度发生变化的话这个监听器是监听不到的所以里面文字的大小不会发生改变
而如果是size的话就无所谓了无论是宽度和高度变化都可以查询到这就取决于你是用cqw还是cqh了

当然这篇文章的标题是控制文字的大小改变
如果你问：可不可以改变子盒子的大小呢？
答：当然可以，不但可以而且效果与%一模一样，所以你为什么不用%呢。

关于`container-type`

mdn解释：

An element can be established as a query container for container size queries using the container-type CSS property. container-type is used to define the type of size containment used in a container query.

译文：
使用container-type CSS属性可以将元素设置为容器大小查询的查询容器。container-type用于定义容器查询中使用的大小约束类型。

Size containment turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops. If this were not the case, a CSS rule inside a container query could change the content size, which in turn could make the query evaluate to false and change the parent element’s size, which in turn could change the content size and flip the query back to true, and so on.

The container size has to be set explicitly or by context — for example, block elements, flex containers, and grid containers stretching to the full width of their parent. If an explicit or contextual size is not available, elements with size containment will collapse.

译文：
大小包含（size containment）是指元素无法从其内容中获取大小信息的能力被关闭，这在容器查询中非常重要，以避免陷入无限循环。如果不关闭这个能力，容器查询中的CSS规则可能会改变内容的大小，进而导致查询结果为false，从而改变父元素的大小。而这又可能会影响内容的大小，使查询结果再次变为true，如此循环往复，形成无限循环。
为了避免这种情况发生，容器的大小必须明确地设置或通过上下文来确定。例如，块级元素、弹性容器和网格容器可以根据其父元素的宽度自动延伸至完整宽度。如果没有明确的或上下文的大小可用，具有大小包含的元素将会折叠，即不显示内容。

语法

/* Keyword values */
container-type: normal;/* 默认值。元素不是容器大小查询的查询容器，但仍然可以是容器样式查询的查询容器。 */
container-type: size;/* 将元素建立为容器大小查询的查询容器。容器大小查询可以应用布局约束、样式约束和大小约束。 */
container-type: inline-size;/* 将元素建立为容器的内联维度查询的查询容器。容器的内联维度查询可以应用布局、样式和内联大小约束。 */
/* Global Values */
container-type: inherit;/* 继承父元素的 container-type 属性值。 */
container-type: initial;/* 将 container-type 属性重置为默认值 normal。 */
container-type: revert;/* 恢复 container-type 属性的初始值或继承值。 */
container-type: revert-layer;/* 在CSS层叠上下文的范围内，恢复 container-type 属性的初始值或继承值。 */
container-type: unset;/* 将 container-type 属性重置为其自然值，如果没有自然值，则重置为初始值。 */

值：

size

Establishes a query container for container size queries in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.
Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements.

在内联和块维度上为容器大小查询建立一个查询容器。将布局约束、样式约束和大小约束应用于容器。
大小约束应用于元素的内联和块方向。可以独立计算元素的大小，忽略子元素。

inline-size

Establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.
Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements.

在容器的内联轴上建立一个维度查询的查询容器。将布局、样式和内联大小约束应用于元素。
内联大小约束应用于元素。可以独立计算元素的内联大小，忽略子元素。

normal

The element is not a query container for any container size queries, but remains a query container for container style queries.

该元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。