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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步