css自适应文本大小

div{
  width:500px;
  height:600px;
  resize:both; // 可拖动方向
  overflow:hidden;
  padding:15px;
  background-color:red;
  container-type:size; // 对
}
div p {
  // cqw 表示根据container-type所选择的宽度作为参照，3cqw表示为500*0.03，
  // cqh 表示根据container-type所选择的高度度作为参照，3cqh表示为500*0.03，
  font-size:3cqw;  
}

与媒体查询的区别：

媒体查询是查询不同设备，不同的屏幕大小来做的响应式处理。
容器查询时根据容器的不同大小来做响应式处理的，需要对被查询的容器设置container-type属性。
媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。

font-size 属性标志

cqw 表示选择参考容器的宽度作为参照，3cqw表示为 容器宽度0.03
cqh 表示选择参考容器的高度作为参照，3cqh表示为 容器宽度0.03

container-type属性

container-type:inline-size; 表示在inline内联轴的方向。
container-type:size; 表示根据宽和高方向进行查询

具体使用方式可联系另一篇文章查看：https://www.cnblogs.com/axingya/p/17897021.html