CSS @container查询让文字样式变化实例页面

回到相关文章 »

展示

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

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

代码

CSS代码：
.container {
    container-type: inline-size;
}
.container p {
    font-size: clamp(.75rem, calc(100cqw / 40), 2rem);
    text-align: center;
}
@container (max-width: 480px) {
  .container p {
    text-align: left;
    font-weight: bold;
  }
}
HTML代码：
<div class="container">
    <p>群众的眼睛是雪亮了，《CSS新世界》上架快一年了依然排在京东Web开发书籍前几。</p>
</div>