CSS容器查询让字号随宽度变化实例页面

回到相关文章 »

展示

群众的眼睛是雪亮了，《CSS新世界》上架快一年了依然排在京东Web开发书籍前几。

//zxx: 可以拖动右下角的拉伸图标改变容器宽度

代码

CSS代码：
.container {
    container-type: inline-size;
    /* 下面 CSS 是demo演示用的 */
    overflow: auto;
    resize: horizontal;
    max-width: 1000px;
    margin-inline: auto;
}
.container p {
    font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
}
HTML代码：
<div class="container">
    <p>群众的眼睛是雪亮了，《CSS新世界》上架快一年了依然排在京东Web开发书籍前几。</p>
</div>