CSS实现文字大小自适应

遇到的问题: 在写页面的时候,兼容手机和PC页面,这样字体大小就需要根据页面的大小进行动态变化。

解决方法: clamp()函数
clamp() 函数的作用是把一个值限制在一个上限和下限区间,当这个值超过区间范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。
clamp()函数文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp

使用方法:

下面代码的意思是: 假设浏览器窗口最小300px,最大1200px,当窗口小于300px的时候字体大小为1rem,当窗口大于1200px的时候,字体大小为1.875rem,否则就使用区间的首选值(0.682rem + 1.59vw)。

css 复制代码
.value {
    font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);
}

不会计算的用下面这个网站算就可以:
https://min-max-calculator.9elements.com/

相关推荐
奔跑的web.5 分钟前
npm install发生了什么?
前端·npm·node.js
zhengxianyi5158 分钟前
npmjs切换淘宝镜像
前端·npm·npm安装源
运筹vivo@15 分钟前
BUUCTF: [SUCTF 2019]EasySQL
前端·web安全·php
holeer15 分钟前
14步入门Vue|cn.vuejs.org教程学习笔记
前端·javascript·vue.js·笔记·前端框架·教程·入门
是席木木啊1 小时前
RuoYi-Vue-Plus UI前端页面布局调整
前端·vue.js·ui
Web极客码3 小时前
WordPress 6.8有哪些新特性
前端·javascript·html
UXbot8 小时前
UI设计工具推荐合集
前端·人工智能·ui
敲敲了个代码9 小时前
如何优化批量图片上传?队列机制+分片处理+断点续传三连击!(附源码)
前端·javascript·学习·职场和发展·node.js
@AfeiyuO9 小时前
Vue 引入全局样式scss
前端·vue·scss
光影少年9 小时前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程