css实现文字大小自适应

在页面编写中经常会碰到页面自适应的问题,也就是页面内部的元素会随着窗口的放大缩小而放大缩小,box可以通过calc + 百分比的形式做到页面自适应,但是box内的字体却无法做到这点,往往box自适应大小了,内部的字体还是原来的大小,看起来会非常别扭,下面就来css实现一下页面文字的自适应大小。

clamp()函数

这里主要用到clamp()函数,clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。
当首选值比最小值要小时,则使用最小值。
当首选值介于最小值和最大值之间时,用首选值。
当首选值比最大值要大时,则使用最大值。

clamp()的文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp

我们可以通过在clamp()内设置表达式,来动态的设置文字的大小,比如这里有一个视口,最小320px,最大1200px,当视口小于320px的时候字体大小为0.7rem,当视口大小大于1200px的时候,字体大小为1.2rem,否则就使用区间的首选值。

.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);  /* 通过动态计算首选值实现响应式字体变化 */
}

在这里插入图片描述
有人说这个值我不知道该设置多大,那么你可以用这个网站:https://min-max-calculator.9elements.com/
在这里插入图片描述
左边是你的参数范围,右边是你的视口大小,还是非常方便的啦~

实现了这个之后,我们就可以开始着手实现响应式布局的文字大小自适应了,下面案例中,视口最小320px,最大1200px,文字取值最小0.7rem,最大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设置一个宽度,最小为屏幕的80%,最大为1000px,通常会这么写:

.box{
width: 80%;
max-width: 1000px;
}

这种写法可以实现容器的最大和最小的宽度限制,有了min()函数后,可以一句css声明即可实现。

min() 方法拥有一个或多个逗号分隔符表达式作为参数,表达式的值中最小的值作为参数值。
语法:min(expression [, expression])
其实就是设置最小值为最大值,我们来看一个案例:

.minSize{
    width:min(80%,1000px ); /* 可以动态设置大小,屏幕宽度大于1000px则宽度为1000px(因为1000比80%小),小于1000px则宽度为80%(此时80%比1000小)*/
    height: 40px;
    border: 1px solid red;
}

在这里插入图片描述
这里 width:min(100%,1024px ); 就是说:屏幕宽度大于1000px则宽度为1000px(因为100080%小),小于1000px则宽度为80%(此时80%1000小)。

注意:min()函数参数需要百分比值,如果是固定px值将会失效。


max()函数

max()函数其实和min()函是数一样的效果,只不过这里取的是最大值为最小值

.maxSize{
    width:max(90%,1024px); /* max()函数和min()函数语法类似,区别在于max()函数返回的
    是最大值,min()函数返回的是最小值。 可以动态设置大小,屏幕宽度90%大于1024px则用90%,若屏幕宽度90%小于1024px则用2014px*/
    height: 40px;
    border: 1px solid red;
    margin-top: 40px;
}

width:max(90%,1024px);的意思是:屏幕宽度90%大于1024px则用90%,若屏幕宽度90%小于1024px则用2014px
在这里插入图片描述


案例源码:https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/1186.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

selenium(5)-------自动化测试脚本(python)

1)alert框的处理 前提:我们是不可以通过控制台直接定位元素的方式去选中这个alert框的&#xff0c;例如说xpath直接进行定位元素 1)先获得弹框的操作句柄:alertdriver.switch_to.alert 2)再次调用accept方法进行关闭弹窗:alert.accept() from selenium import webdriver import…

强化学习分类与汇总介绍

1.强化学习&#xff08;Reinforcement Learning, RL&#xff09; 强化学习把学习看作试探评价过程&#xff0c;Agent选择一个动作用于环境&#xff0c;环境接受该动作后状态发生变化&#xff0c;同时产生一个强化信号(奖或惩)反馈给Agent&#xff0c;Agent根据强化信号和环境当…

【python刷题】leecode官方提示“->“,“:“这些符号是什么意思?什么是Type Hints?

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于海外某世界知名高校就读计算机相关专业。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。…

JavaSE基础总结

JDK与JRE JDK&#xff0c;全称Java Development Kit&#xff0c;Java开发工具包 JRE&#xff0c;全称Java Runntime Environment&#xff0c;Java运行环境 JDK包含后者JRE。 JDK也可以说是Java SDK&#xff08;Software Development kit&#xff0c;软件开发工具包&#xff09;…

JVM高频面试题

1、项目中什么情况下会内存溢出&#xff0c;怎么解决&#xff1f; &#xff08;1&#xff09;误用固定大小线程池导致内存溢出 Excutors.newFixedThreadPool内最大线程数是21亿(2) 误用带缓冲线程池导致内存溢出最大线程数是21亿(3)一次查询太多的数据&#xff0c;导致内存占用…

基于深度学习的农作物叶片病害检测系统(UI界面+YOLOv5+训练数据集)

摘要&#xff1a;农作物叶片病害检测系统用于智能检测常见农作物叶片病害情况&#xff0c;自动化标注、记录和保存病害位置和类型&#xff0c;辅助作物病害防治以增加产值。本文详细介绍基于YOLOv5深度学习模型的农作物叶片病害检测系统&#xff0c;在介绍算法原理的同时&#…

百度的文心一言 ,没有想像中那么差

robin 的演示 我们用 robin 的演示例子来对比一下 文心一言和 ChatGPT 的真实表现&#xff08;毕竟发布会上是录的&#xff09;。 注意&#xff0c;我使用的 GPT 版本是 4.0 文学创作 1 三体的作者是哪里人&#xff1f; 文心一言&#xff1a; ChatGPT&#xff1a; 嗯&a…

C++ STL:vector的使用方法及模拟实现

目录 一. vector概述 二. vector接口函数的使用方法和模拟实现 2.1 vector类模板的成员变量 2.2 构造函数的使用和模拟实现 2.2.1 构造函数的使用方法 2.2.2 构造函数的模拟实现 2.3 析构函数的模拟实现 2.4 赋值运算符重载函数的使用和模拟实现 2.4.1 函数的使用 2.…

MybatisPlus------MyBatisX插件:快速生成代码以及快速生成CRUD(十二)

MybatisPlus------MyBatisX插件&#xff08;十二&#xff09; MyBatisX插件是IDEA插件&#xff0c;如果想要使用它&#xff0c;那么首先需要在IDEA中进行安装。 安装插件 搜索"MyBatisX"&#xff0c;点击Install&#xff0c;之后重启IDEA即可。 插件基本用途&…

蓝桥杯嵌入式第四课--定时器

前言蓝桥杯对于定时器这部分的考察主要集中在定时器中断、PWM输出以及输入捕获三个方面&#xff0c;本节课着眼于应用&#xff0c;介绍一下定时器的使用。定时器中断一、基础概念对没接触过定时器的新手来说&#xff0c;如果想要快速上手定时器的使用&#xff0c;首先要先对定时…

Python每日一练(20230318)

目录 1. 排序链表 ★★ 2. 最长连续序列 ★★ 3. 扰乱字符串 ★★★ &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 排序链表 给你链表的头结点 head &#xff0c;请将其按 升序 …

卷积神经网络CNN识别MNIST数据集

这次我们将建立一个卷积神经网络&#xff0c;它可以把MNIST手写字符的识别准确率提升到99%&#xff0c;读者可能需要一些卷积神经网络的基础知识才能更好的理解本节的内容。 程序的开头是导入TensorFlow&#xff1a; import tensorflow as tf from tensorflow.examples.tutor…

C语言老题新解16-20 用命令行打印一些图案

文章目录11 打印字母C12 输出国际象棋棋盘。13 打印楼梯&#xff0c;同时在楼梯上方打印两个笑脸。14 输出9*9 口诀。15 有一道题要输出一个图形&#xff0c;然后Very Beautiful。11 打印字母C 11 用*号输出字母C的图案。 讲道理这绝对不该是个新人能整出来的活儿&#xff0c…

TCP/IP协议栈之数据包如何穿越各层协议(绝对干货)

所有互联网服务&#xff0c;均依赖于TCP/IP协议栈。懂得数据是如何在协议栈传输的&#xff0c;将会帮助你提升互联网程序的性能和解决TCP相关问题的能力。 我们讲述在Linux场景下数据包是如何在协议层传输的。 1、发送数据 应用层发送数据的过程大致如下&#xff1a; 我们把…

蓝桥杯嵌入式第五课--输入捕获

前言输入捕获的考题十分明确&#xff0c;就是测量输入脉冲波形的占空比和频率&#xff0c;对我们的板子而言&#xff0c;就是检测板载的两个信号发生器产生的信号&#xff1a;具体来说就是使用PA15和PB4来做输入捕获。输入捕获原理简介输入捕获能够对输入信号的上升沿和下降沿进…

WorkTool企微机器人接入智能问答

一、前言 最新版的企微机器人已经集成 Chat &#xff0c;无需开发可快速搭建智能对话机器人。 从官方介绍看目前集成版本使用模型为 3.5-turbo。 二、入门 创建 WorkTool 机器人 你可以通过这篇快速入门教程&#xff0c;来快速配置一个自己的企微机器人。 实现的流程如图&…

Windows与Linux端口占用、查看的方法总结

Windows与Linux端口占用、查看的方法总结 文章目录Windows与Linux端口占用、查看的方法总结一、Windows1.1Windows查看所有的端口1.2查询指定的端口占用1.3查询PID对应的进程1.4查杀死/结束/终止进程二、Linux2.1lsof命令2.2netstat命令一、Windows 1.1Windows查看所有的端口 …

基于GPT-4的免费代码生成工具

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

SpringCloud五大核心组件

Consul 等&#xff0c;提供了搭建分布式系统及微服务常用的工具&#xff0c;如配置管理、服务发现、断路器、智能路由、微代理、控制总线、一次性token、全局锁、选主、分布式会话和集群状态等&#xff0c;满足了构建微服务所需的所有解决方案。 服务发现——Netflix Eureka …

7个最受欢迎的Python库,大大提高开发效率

当第三方库可以帮我们完成需求时&#xff0c;就不要重复造轮子了 整理了GitHub上7个最受好评的Python库&#xff0c;将在你的开发之旅中提供帮助 PySnooper 很多时候时间都花在了Debug上&#xff0c;大多数人呢会在出错位置的附近使用print&#xff0c;打印某些变量的值 这个…
最新文章