css实现文字大小自适应
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
clamp()函数.clampSize{ width: 100%; /* 可以动态设置大小 */ height: 40px; margin: 30px; line-height: 40px; text-align: center; border: 1px solid red; font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem); /* 通过动态计算首选值实现响应式字体变化 */ } <div class="useClamp"> <div>女装</div> <div>童鞋</div> <div>箱包</div> <div>首饰挂件</div> </div> .useClamp{ width: 80%; /*容器大小自适应*/ height: 30px; padding-left: 10px; display: flex; align-items: center; direction: ltr; background: #eee; >div{ min-width: 60px; width: 30%; /*按钮大小自适应*/ height: 30px; background: #4d90fe; color: white; display: flex; align-items: center; justify-content: space-around; border-radius: 4px; margin-inline-end: 10px; font-size: clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem); /*文字大小自适应,最小0.7rem,最大1.2rem,否则取首选值*/ } } 推荐内容
大小的上下限制min()函数.box{ width: 80%; max-width: 1000px; } .minSize{ width:min(80%,1000px ); /* 可以动态设置大小,屏幕宽度大于1000px则宽度为1000px(因为1000比80%小),小于1000px则宽度为80%(此时80%比1000小)*/ height: 40px; border: 1px solid red; } max()函数.maxSize{ width:max(90%,1024px); /* max()函数和min()函数语法类似,区别在于max()函数返回的 是最大值,min()函数返回的是最小值。 可以动态设置大小,屏幕宽度90%大于1024px则用90%,若屏幕宽度90%小于1024px则用2014px*/ height: 40px; border: 1px solid red; margin-top: 40px; } 该文章在 2023/8/24 22:06:56 编辑过 |
关键字查询
相关文章
正在查询... |