当前位置：首页 > news >正文

CSS clamp() 函数：构建更智能的响应式设计

news 来源：原创 2025/5/17 14:48:18

在响应式设计中，我们经常需要处理元素大小的动态变化。CSS clamp() 函数提供了一个优雅的解决方案，让我们的设计更加灵活和智能。

clamp() 函数是什么？

clamp() 函数接受三个参数：

clamp(最小值, 首选值, 最大值)

这三个参数分别代表：

最小值（MIN）：允许的最小值
首选值（VAL）：理想的计算值
最大值（MAX）：允许的最大值

实际应用场景

1. 响应式字体大小

/* 字体大小在 16px 到 32px 之间，基于视窗宽度动态调整 */
.title {font-size: clamp(16px, 5vw, 32px);
}

2. 容器宽度控制

.container {/* 容器宽度最小 320px，最大 1200px */width: clamp(320px, 80%, 1200px);margin: 0 auto;
}

3. 动态边距设置

.section {/* 边距随视窗大小变化，但有最小和最大限制 */padding: clamp(1rem, 5vh, 3rem);
}

clamp() vs 媒体查询

传统方式使用媒体查询：

.title {font-size: 16px;
}@media (min-width: 768px) {.title {font-size: 20px;}
}@media (min-width: 1200px) {.title {font-size: 32px;}
}

使用 clamp() 的优雅方式：

.title {font-size: clamp(16px, 4vw + 1rem, 32px);
}

实用技巧

1. 组合计算

.element {/* 基础值 + 响应值的组合 */font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}

2. 内容区域控制

.content {/* 确保阅读宽度适中 */width: clamp(45ch, 50%, 75ch);
}

3. 图片大小控制

.responsive-image {width: clamp(200px, 50vw, 800px);height: auto;
}

浏览器兼容性

现代浏览器（Chrome、Firefox、Safari、Edge）都已支持
IE 不支持
可以使用 min() 和 max() 函数作为降级方案

最佳实践

合理设置边界值

/* 避免极端情况下的布局破坏 */
.element {padding: clamp(1rem, 5%, 3rem);
}

注意单位统一

/* 确保单位类型匹配 */
.element {width: clamp(300px, 50vw, 1000px); /* ✅ 好 *//* width: clamp(300px, 50%, 1000px); */ /* ❌ 避免混合相对和绝对单位 */
}

设置合适的回退方案

.element {/* 为不支持 clamp 的浏览器提供回退 */width: 80%;width: clamp(300px, 80%, 1200px);
}

总结

CSS clamp() 函数是响应式设计中的一个强大工具：

简化了媒体查询的使用
提供了更平滑的响应式过渡
减少了代码量
使维护更容易

CSS clamp() 函数：构建更智能的响应式设计

在响应式设计中，我们经常需要处理元素大小的动态变化。CSS clamp() 函数提供了一个优雅的解决方案，让我们的设计更加灵活和智能。 clamp() 函数是什么？ clamp() 函数接受三个参数： clamp(最小值, 首选值, 最大值)这三个参数分别…...

编程日记 2025/5/17 14:48:18

【C++笔记】数据结构进阶之二叉搜索树(BSTree)

【C笔记】数据结构进阶之二叉搜索树(BSTree) 🔥个人主页：大白的编程日记 🔥专栏：C笔记文章目录【C笔记】数据结构进阶之二叉搜索树(BSTree)前言一.二叉搜索树的概念二.二叉搜索树的性能分析三.二叉搜索树的实现3.1二叉树的中序…...

编程日记 2025/5/18 8:32:56

c++设计模式模块与系统

c 中lambda 本质就是一个匿名(没有名)的函数； 可以用一个数组元素存储一个函数的指针； 通过数组下标来使用函数； 高内聚低耦合如何理解设计模式中的高内聚低耦合高内聚: 用于指导如何组织和划分软件设计。 **定义：**高内聚指的…...

编程日记 2025/5/17 17:35:07

【81-90期】Java核心面试问题深度解析：性能优化与高并发设计

🚀 作者 ：“码上有前” 🚀 文章简介 ：Java 🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬 文章题目：Java核心面试问题深度解析：性能优化与高并发设计摘要： 本文聚…...

编程日记 2025/5/14 20:05:46

python实现TCP服务端，支持对所有客户端的数据收发，支持终端自定义命令操作，提供clear命令一键断开所有的客户端连接

前言 python实现TCP服务端，支持对所有客户端的数据收发，支持终端自定义命令操作，提供clear命令一键断开所有的客户端连接简单易懂，直接上码源码 import socket import threadingclass TCPServer:# 修改此处ip 端口def __ini…...

编程日记 2025/5/11 23:23:49

【R安装】R语言的详细安装及环境配置（2024年11月）

目录 R及Rstudio下载R下载Rstudio下载 R及Rstudio安装R安装Rtools 安装Rstudio安装运行 RStudio通过RStudio配置使用特定的R版本参考 R及Rstudio下载 R下载 R官网-The R Project for Statistical Computing 点击【download R】，进入下载界面： 选择…...

编程日记 2025/5/18 9:09:14

Android 12.0 通知--PendingIntent基本代码

一. PendingIntent 在 Android 通知中的使用场景使用场景: Android 通知的 setContentIntent() 需要传入 PendingIntent , 即当点击通知时,执行 intent 的动作.如下例子: //1.创建Intent对象Intent intent new Intent(this, MainActivity1.class); //2.获取能启动 Activity 的…...

编程日记 2025/5/18 8:35:34

网络安全在数字时代保护库存数据中的作用

如今，通过软件管理库存已成为一种标准做法。企业使用数字工具来跟踪库存水平、管理供应链和规划财务。然而，技术的便利性也带来了网络威胁的风险。黑客将库存数据视为有价值的目标。保护这些数据不仅重要，而且必不可少。了解网络安全及其…...

编程日记 2025/5/18 8:32:56

文本搜索程序（Qt）

头文件 #ifndef TEXTFINDER_H #define TEXTFINDER_H#include <QWidget> #include <QFileDialog> #include <QFile> #include <QTextEdit> #include <QLineEdit> #include <QTextStream> #include <QPushButton> #include <QMess…...

编程日记 2025/5/14 17:20:31

云原生革命：构建未来应用的无限可能

在这个数字化飞速发展的时代，云原生技术如同一股不可阻挡的潮流，正深刻改变着软件开发和部署的方式。它不仅仅是一种技术变革，更是一场关于如何更高效、更灵活地构建和运行应用的革命。今天，我们就来深入探讨云原生的魅力所在&…...

编程日记 2025/5/18 8:31:35

【Ubuntu 24.04】How to Install and Use NVM

参考下载 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash激活 Activate NVM: Once the installation script completes, you need to either close and reopen the terminal or run the following command to use nvm immediately. exp…...

编程日记 2025/5/18 8:47:50

android12锁屏界面pin码或者图案解锁居中显示

设置pin码或者图案锁屏后，在锁屏界面向上划左边，图案解锁就在左边， 向上划右边图案就在右边，如何设置一直居中显示呢？ diff --git a/packages/SystemUI/res/layout/super_notification_shade.xml b/packages/SystemUI…...

编程日记 2025/5/18 8:12:35

【VUE3】新版Vue3+ElementPlus全家桶开发视频项目实战

VUE 介绍 Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。 Vue.js是一个MVVM(Model - View - ViewModel)的SPA框架。 Model：数…...

编程日记 2025/5/18 1:30:39

【UE5 C++课程系列笔记】05——组件和碰撞

效果可以看到我们可以实现的功能是 （1）可以通过鼠标旋转视角 （2）通过使用Pawn移动组件来控制Pawn移动 （3）Pawn碰到物体会被阻挡然后逐渐滑动 （4）通过空格切换激活/关闭粒子效果…...

编程日记 2025/5/18 7:54:56

【docker 拉取镜像超时问题】

问题描述在centosStream8上安装docker，使用命令sudo docker run hello-world 后出现以下错误： Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Ti…...

编程日记 2025/5/17 14:15:15

51-基于单片机的智能语音识别与处理系统设计

目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于51单片机，搞L298N驱动两个电机转动，然后搞LCD1602显示屏，弄个超声波传感器实时检测距离通过LCD1602显示距离，如果距离小于阈值，则两…...

编程日记 2025/5/17 20:51:56

民安：助力提升城市安全水平

随着城市化进程的加速，平安城市的创建成为了社会治理的重要议题。为了解公众对平安城市创建的看法和评价，为提升城市安全水平提供参考，近期某市委托民安智库专业市场调查公司开展了一次安全感满意度调查。本次调查围绕公共安全、个人安全、…...

编程日记 2025/5/12 11:37:25

类和对象--中--运算符重载、日期类实现（重要）

目录 1.运算符重载 2.日期类 1.运算符重载 2.1作用： 为了让C的新类型：类。也可以进行内置类型的运算符操作。所以就有了运算符重载。 2.2定义： 运算符重载是具有特殊名字的函数，他的名字是由operator和后⾯要定义的运算符共…...

编程日记 2025/5/18 9:01:12

个人回顾。

一鸡摸塔塔开！ 2024/11/24 18:20:42 2019.6毕业。入职hg。到2020.6。入职一年。居住侨源山庄极小房间。月租一千。一鸡摸塔塔开！ 2024/11/24 18:21:15 期间也有保持学习。也玩游戏看小说。把大学缺失的补回来。一鸡摸塔塔开！ 2024/11/24 18:30:33 博客园随笔学习笔记 100…...

编程日记 2025/5/18 2:16:39

前端面试题-1(详解事件循环）

1.了解浏览器的进程模型 1.什么是进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。 2.什么是线程&#xff1f…...

编程日记 2025/5/18 8:15:16

http的文件上传和下载原理

目录一：上传 1：http请求格式 2：文件上传类型分析 1：md5秒传 2：分片上传 1. 什么是分片上传 2. 分片上传的场景 3：断点续传 1. 什么是断点续传 2. 应用场景 3. 实现断点续传的核心逻辑 4. 实现流…...

编程日记 2025/5/18 8:10:46

leetcode 212. 单词搜索 II

给定一个 m x n 二维字符网格 board 和一个单词（字符串）列表 words， 返回所有二维网格上的单词。单词必须按照字母顺序，通过相邻的单元格内的字母构成，其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同一…...

编程日记 2025/5/18 9:11:56

1、数据结构概述及顺序表（附：可以直接打印显示的源码）

《数据结构》概述： 数据结构：数据元素之间的关系（逻辑关系） 数据类型：高地电平表示 1/0 要做大量的运算：诞生了基本数据类型：int double .....--》反应了数据的取值范围 （int字…...

编程日记 2025/5/18 8:04:03

Redis

概述 Redis（全称 REmote DIctionary Server）是一个开源的内存数据存储系统，它被广泛应用于缓存、消息队列、实时数据存储等场景。Redis 是一个基于内存的数据结构存储，可以作为数据库、缓存和消息中间件使用优点高性能&#xf…...

编程日记 2025/5/18 8:01:04

Android 13 编译Android Studio版本的Launcher3

Android 13 Aosp源码源码版本Android Studio版本Launcher3QuickStepLib (主要代码) Launcher3ResLib(主要资源)Launcher3IconLoaderLib(图...

编程日记 2025/5/18 8:25:51

【高等数学学习记录】微分中值定理

一、知识点 （一）罗尔定理费马引理设函数 f ( x ) f(x) f(x) 在点 x 0 x_0 x0 的某邻域 U ( x 0 ) U(x_0) U(x0) 内有定义，并且在 x 0 x_0 x0 处可导，如果对任意的 x ∈ U ( x 0 ) x\in U(x_0) x∈U(x0) &#xff0…...

编程日记 2025/5/18 8:02:23

百度文心一言 vs 阿里通义千问哪个好？

背景介绍： 在当前的人工智能领域，随着大模型技术的快速发展，市场上涌现出了众多的大规模语言模型。然而，由于缺乏统一且权威的评估标准，很多关于这些模型能力的文章往往基于主观测试或自行设定的排行榜来评价模型性能…...

编程日记 2025/5/18 9:02:32

wordpress使用Markdown语法写的文章图片显示不正常，记录一次折腾之旅

wordpress使用Markdown语法写的文章图片显示不正常，记录一次折腾之旅当我把wordpress站点地址改成域名之后，wordpress上写的文章是使用Markdown语法进行写作的，但是Markdown引用的图片就会加载不出来，但如果把站点地址改成局域网的IP，所有的一切都显示正常了。除非我把图…...

编程日记 2025/5/17 16:57:46

MTK 展锐高通 sensorhub架构

一、MTK平台 MTK框架可以分为两部分，AP和SCP。 AP是主芯片，SCP是协处理器，他们一起工作来处理sensor数据。 SCP 是用来处理sensor和audio相关功能和其他客制化需求的一个协处理理器，MTK SCP选择freeRTOS作为操作系统&#xff0c…...

编程日记 2025/5/18 8:05:53

npm 最新国内淘宝镜像地址源 (旧版已不能用)

注意：原域名https://registry.npm.taobao.org/ 在 2022.06.30 号正式下线和停止 DNS 解析最新地址： #最新地址淘宝 NPM 镜像站喊你切换新域名啦! npm config set registry https://registry.npmmirror.com 查看镜像使用状态 npm config get registr…...

编程日记 2025/5/6 13:09:01

（超详细图文详情）Navicat 配置连接 Oracle

1、下载依赖文件 Oracle官网下载直链：https://www.oracle.com/database/technologies/instant-client/winx64-64-downloads.html 夸克网盘下载（oracle19c版本）：https://pan.quark.cn/s/5061e690debc 官网下载选择对应 Oracle 版…...

编程日记 2025/5/18 8:27:30

iOS 系统中使用 webView 打印 html 的打印边距问题

需求是使用系统提供的打印功能将HTML代码打印出来 1、使用CSS page 设置边距（iOS不生效） page {margin: 0;padding: 0;size: A6 portrait; }在 Android 中边距设置生效的，但是在 iOS 系统使用CSS page规则是不生效的当从 iOS 系统打印网页…...

编程日记 2025/5/16 17:18:38

深度学习Pytorch中的模型保存与加载方法

深度学习:Pytorch中的模型保存与加载方法在 PyTorch 中，模型的保存和加载对于模型的持久化和后续应用至关重要。这里详细介绍了两种主要方法：保存整个模型（包括架构和参数）和仅保存模型的状态字典。以下内容进一步完善了加载模型…...

编程日记 2025/5/17 17:52:32

(vue)启动项目报错The project seems to require pnpm but it‘s not installed

(vue)启动项目报错The project seems to require pnpm but it’s not installed 原因该错误信息表明你的项目需要使用 pnpm 作为包管理工具，但系统中尚未安装 pnpm。解决方法【1】删除pnpm.lock 【2】npm install -g pnpm 之后再重新启动 yarn报错&#xff0…...

编程日记 2025/5/17 7:55:33

【Leetcode 每日一题】3250. 单调数组对的数目 I

问题背景给你一个长度为 n n n 的正整数数组 n u m s nums nums。如果两个非负整数数组 ( a r r 1 , a r r 2 ) (arr_1, arr_2) (arr1,arr2) 满足以下条件，我们称它们是单调数组对： 两个数组的长度都是 n n n。 a r r 1 arr_1 arr1 是…...

编程日记 2025/5/14 21:25:05

C++语法·叭

阁下何不乘风起，扶摇直上九万里。 qi fei 目录内存管理分区介绍 1.栈区： 2.内存映射段： 3.堆： 4.数据段： 5.代码段： 补充： C内存管理（简略回忆） C内存…...

编程日记 2025/5/18 8:35:34

ComfyUI | ComfyUI桌面版发布，支持winmac多平台体验，汉化共享等技巧！（内附安装包）

ComfyUI 桌面版正式推出，支持 Windows 与 macOS 等多平台，为 AI 绘画爱好者带来全新体验。其安装包便捷易用，开启了轻松上手之旅。汉化共享功能更是一大亮点，打破语言障碍，促进知识交流与传播。在操作上，它…...

编程日记 2025/5/15 1:00:57

探索Python词云库WordCloud的奥秘

文章目录探索Python词云库WordCloud的奥秘1. 背景介绍：为何选择WordCloud？2. WordCloud库简介3. 安装WordCloud库4. 简单函数使用方法5. 应用场景示例6. 常见Bug及解决方案7. 总结探索Python词云库WordCloud的奥秘 1. 背景介绍：为何选择Wo…...

编程日记 2025/5/17 23:42:24

用PHP抓取HTTPS资源时的常见问题与解决方法

概述随着互联网的发展，HTTPS已经成为主流协议，网站的数据安全性得到了显著提升。然而，对于开发者来说，HTTPS的广泛应用也增加了数据抓取的复杂性。尤其是在PHP中实现HTTPS资源的抓取时，开发者可能会遇到以下问题&…...

编程日记 2025/5/10 21:55:44

spring知识点复习--针对面试的

前言此内容是笔者通过B站的视频总结而来。原视频链接地址：6、Bean Factory与FactoryBean有什么区别_哔哩哔哩_bilibili 1.谈谈springIOC的理解，原理与实现回答涉及到的点： 控制反转：是一种理论思想，原来的对象是由…...

编程日记 2025/5/17 22:56:43

Web前端学习_CSS盒子模型

content padding border margin <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS盒子模型</title><style></style> </head> <body> <div class"demo&quo…...

编程日记 2025/5/14 5:56:50

ajax基础

一：express框架在终端输入nodejs文件名 // 引入express const express require(express); //创建应用对象 const app express(); //创建路由规则 app.get(/,(request,response) > {//设置响应response.send(Hello Express); }); // 监听3000端口 app.lis…...

编程日记 2025/5/15 7:04:02

Python轴承故障诊断 (21)基于VMD-CNN-BiTCN的创新诊断模型

往期精彩内容： Python-凯斯西储大学（CWRU）轴承数据解读与分类处理 Pytorch-LSTM轴承故障一维信号分类(一)-CSDN博客 Pytorch-CNN轴承故障一维信号分类(二)-CSDN博客 Pytorch-Transformer轴承故障一维信号分类(三)-CSDN博客三十多个开源…...

编程日记 2025/5/17 22:57:10

强化学习导论 -章9 基于函数逼近的同轨策略预测

基于函数逼近的同轨策略预测我们前面已经完成了基于表格的学习任务，基于表格的就是每个s是独立学习的，基本上不考虑泛化的能力，但是也对于每个任务状态学习的非常好。考虑到状态空间越来越大，我们必须考虑到函数逼近的情况。 1…...

编程日记 2025/5/16 19:39:46

Ubuntu环境中RocketMQ安装教程

参考教程 https://blog.csdn.net/weixin_56219549/article/details/126143231 1、安装JDK，并配置环境变量（略） 2、下载RocketMQ安装包 RocketMQ下载地址，选择二进制包下载 unzip rocketmq-all-5.0.0-ALPHA-bin-release.zip 使…...

编程日记 2025/5/14 10:05:08