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

CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景

news 来源：原创 2025/7/22 0:20:04

CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景

在 CSS 中，各种单位有不同的特性和适用场景，理解它们的区别对实现响应式布局至关重要。

1. 绝对单位 px

特点：

像素（Pixel）是绝对长度单位
1px 对应屏幕上的一个物理像素点（在高清屏上可能对应多个物理像素）
固定大小，不随其他因素改变

使用场景：

.border {width: 1px; /* 细边框 */
}
.icon {width: 24px; /* 固定尺寸图标 */
}

优点： 精确控制元素尺寸
缺点： 在响应式设计中不够灵活

2. 相对单位 rem

特点：

相对于根元素(html)的字体大小
默认情况下，1rem = 16px（浏览器默认字号）
可通过修改html字体大小改变所有rem单位的值

使用方式：

html {font-size: 62.5%; /* 1rem = 10px (16px×62.5%) */
}
.box {width: 20rem; /* 200px */padding: 1.5rem; /* 15px */
}

响应式适配方案：

// 根据设计稿宽度动态设置rem基准值
document.documentElement.style.fontSize = (document.documentElement.clientWidth / 设计稿宽度) * 100 + 'px';

优点： 方便整体缩放，适配不同屏幕
缺点： 需要计算转换

3. 相对单位 em

特点：

相对于当前元素或父元素的字体大小
1em = 当前元素的font-size值
多层嵌套时会产生复合效果

使用示例：

.parent {font-size: 20px;
}
.child {padding: 1em; /* 20px */margin: 0.5em; /* 10px */
}
.button {font-size: 1.2em; /* 相对于父级字体 */padding: 0.8em 1.5em; /* 相对于自身字体 */
}

优点： 适合组件内部相对尺寸
缺点： 嵌套复杂时计算困难

4. 视口单位 vw/vh

特点：

vw (viewport width): 1vw = 视口宽度的1%
vh (viewport height): 1vh = 视口高度的1%
vmin/vmax: 取vw/vh中较小/较大的值

使用场景：

.header {height: 10vh; /* 视口高度的10% */
}
.banner {width: 80vw; /* 视口宽度的80% */
}
.modal {width: min(90vw, 1200px); /* 不超过1200px */
}

优点： 直接响应视口变化
缺点： 小屏幕上可能太小，大屏幕上可能太大

5. 单位对比表

单位	基准	是否响应式	典型应用场景
px	绝对	否	边框、固定尺寸元素
rem	根元素字体	是	整体布局、间距
em	当前/父元素字体	是	文本相关、按钮内边距
vw/vh	视口尺寸	是	全屏元素、大尺寸布局
%	父元素	是	流式布局、宽度高度

6. 实际开发建议

混合使用原则
- 使用rem设置主要布局尺寸
- 使用px设置边框、阴影等固定样式
- 使用em设置文本相关和组件内部间距
- 使用vw/vh设置全屏元素
移动端适配方案

/* 基于750px设计稿的rem适配 */
html {font-size: calc(100vw / 7.5); /* 100vw/750×100 */
}
/* 使用时直接除以100 */
.box {width: 3.2rem; /* 设计稿320px */
}

现代CSS方案

.container {width: clamp(300px, 80vw, 1200px); /* 最小值、理想值、最大值 */padding: max(2vw, 10px); /* 取较大值 */
}

理解这些单位的差异并根据场景合理选择，可以创建出既精确又灵活的响应式布局。

CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景

CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景在 CSS 中，各种单位有不同的特性和适用场景，理解它们的区别对实现响应式布局至关重要。 1. 绝对单位 px 特点： 像素（Pixel）是绝对长度单位1px 对应屏…...

编程日记 2025/7/22 0:20:04

YOLO模型predict（预测/推理）的参数设置

上一章描述了预测初体验，基本可以使用现有的yolo模型进行预测/推理。本次我们了解一下这个过程中的参数的作用。 1.参数示例 conf=0.68 ：表示模型识别这个东西是车的概率为68% 。一般默认的情况下，概率小于25%的就不显示了。 1）调整一下python的代码的参数如下,可以预测图…...

编程日记 2025/7/22 0:13:09

MATLAB中NLP工具箱支持聚类算法

文章目录前言一、层次聚类（Hierarchical Clustering）二、DBSCAN（基于密度的空间聚类）三、高斯混合模型（GMM）四、谱聚类（Spectral Clustering）五、模糊 C 均值（Fuzzy C-M…...

编程日记 2025/7/16 8:03:18

甘特图工具怎么选？免费/付费项目管理工具对比测评（2025最新版）

2025年甘特图工具的全面指南在项目管理领域，甘特图作为最直观的任务规划和进度追踪工具，已成为团队协作和项目执行的核心手段。随着数字化技术的快速发展，2025年的甘特图工具市场呈现出前所未有的多元化和智能化趋势。从开源软件到云端协作…...

编程日记 2025/7/19 23:55:09

Google设置app-ads.txt

问题： 应用上架后admob后台显示应用广告投放量受限，需要设置app-ads.txt才行。如何解决： 官方教程: 看了下感觉不难，创建一个txt，将第二条的代码复制进行就得到app-ads.txt了。然后就是要把这个txt放到哪才可以…...

编程日记 2025/7/19 13:55:48

Swift 二分查找实战：精准定位第一个“Bug版本”（LeetCode 278）

文章目录摘要描述示例题解答案（Swift）题解代码分析示例测试及结果输出结果： 时间复杂度分析空间复杂度分析总结摘要在版本迭代频繁的项目开发中，定位引入 bug 的第一个版本是一项高频任务。LeetCode 第278题“第一个错误的版…...

编程日记 2025/7/2 15:47:34

《AI革命重塑未来五年：医疗诊断精准度翻倍、自动驾驶事故锐减90%，全球科技版图加速变革》

1. 显著突破领域：AI 引发医疗与自动驾驶的范式变革医疗领域的突破： AI正深刻改变医学研发和临床诊疗模式。在新药研发现代生物学中，DeepMind公司推出的 AlphaFold AI 模型在蛋白质折叠预测上取得了重大突破，被视为解决了困扰科学…...

编程日记 2025/7/22 0:08:12

【盈达科技】AICC™系统：重新定义生成式AI时代的内容竞争力

盈达科技AICC™系统：重新定义生成式AI时代的内容竞争力 ——全球首款AI免疫化内容中台的技术革命与商业实践一、技术破局：AICC™系统如何重构AI内容生态 1. 技术架构：四大引擎构建闭环护城河盈达科技AICC™（AI-Immunized Con…...

编程日记 2025/7/21 13:28:50

芯驰科技与安波福联合举办技术研讨会，深化智能汽车领域合作交流

5月15日，芯驰科技与全球移动出行技术解决方案供应商安波福（Aptiv）在上海联合举办以“芯智融合，共赢未来”为主题的技术研讨会。会上，双方聚焦智能座舱与智能车控的发展趋势，展开深入交流与探讨，…...

编程日记 2025/7/12 15:45:33

开发前端搭建npm v11.4.0 is known not to run on Node.js v14.18.1.

错误nodejs 和npm 版本不一致 ERROR: npm v11.4.0 is known not to run on Node.js v14.18.1. This version of npm supports the following node versions: ^20.17.0 || >22.9.0. You can find the latest version at https://nodejs.org/. ERROR: D:\softTool\node-v14…...

编程日记 2025/7/22 0:11:04

关于systemverilog中在task中使用force语句的注意事项

先看下面的代码 module top(data);logic clk; inout data; logic temp; logic sampale_data; logic [7:0] data_rec;task send_data(input [7:0] da);begin(posedge clk);#1;force datada[7];$display(data);(posedge clk);#1;force datada[6]; $display(data); (posed…...

编程日记 2025/7/15 1:32:06

国产 iPaaS 与国外 iPaaS 产品相比如何？以谷云科技为例

iPaaS（Integration Platform as a Service）作为企业集成的关键技术，受到了广泛关注。国产 iPaaS 产品与国外 iPaaS 产品存在诸多差异，以下将从多个方面进行分析探讨。一、技术架构与创新国外 iPaaS 产品往往技术架构成熟且先进…...

编程日记 2025/7/15 23:42:36

低功耗：XILINX FPGA如何优化功耗？

优化Xilinx FPGA及其外围电路的功耗需要从硬件设计、软件配置和系统级优化三个层面综合考虑。以下是具体的优化策略，涵盖硬件和软件方面： 一、硬件层面的功耗优化选择低功耗FPGA型号选择Xilinx低功耗系列芯片，如7系列中的Artix-7&#xff…...

编程日记 2025/7/22 0:14:45

从纸质契约到智能契约：AI如何改写信任规则与商业效率？——从智能合约到监管科技，一场颠覆传统商业逻辑的技术革命

一、传统合同的“低效困境”：耗时、昂贵、风险失控近年来，全球商业环境加速向数字化转型，但合同管理却成为企业效率的“阿喀琉斯之踵”。据国际商会（International Chamber of Commerce）数据显示，全球企业…...

编程日记 2025/7/22 0:09:32

在金融发展领域，嵌入式主板有什么优点？

在金融发展领域，嵌入式主板能够有力推动金融行业的智能化与高效化进程。主板的强大计算能力可以保障业务高效运行。例如在银行的高频交易场景下，其强大计算能力可确保系统在高负荷下依然保持流畅稳定，快速响应用户需求，大大提升金…...

编程日记 2025/7/22 0:06:11

打卡Day30

导入官方库的三种手段方法一：直接导入整个模块 import math print(math.sqrt(16)) # 输出: 4.0方法二：从模块中导入特定函数或类 from datetime import datetime now datetime.now() print(now) # 输出当前日期和时间方法三：使用别名简…...

编程日记 2025/7/21 21:59:00

AI量化交易是什么？它是如何重塑金融世界的？

第一章：证券交易的进化之路 1.1 从喊价到代码：交易方式的革命性转变在电子交易普及之前，证券交易依赖于交易所内的公开喊价系统。交易员通过手势、喊话甚至身体语言传递买卖信息，这种模式虽然直观，但效率低下且容易…...

编程日记 2025/7/22 0:13:08

AIGC与数字金融：人工智能金融创新的新纪元

AIGC与数字金融：人工智能金融创新的新纪元引言人工智能生成内容（AIGC）在数字金融领域发挥着关键作用，从金融内容生成到智能风控，从个性化服务到投资决策，AIGC正在重塑金融的方式和效果。本文将深入探讨A…...

编程日记 2025/7/22 0:08:12

芯片生态链深度解析（四）：芯片制造篇——纳米尺度上的精密艺术

开篇：芯片制造——现代工业的"皇冠明珠" 在芯片生态链的版图中，芯片制造是连接设计与封测的核心枢纽，堪称现代工业的“皇冠明珠”。如果说芯片设计是人类对微观世界的构想，那么制造便是将这种构想转化为现实的终极工程…...

编程日记 2025/7/21 4:27:20

黄金批次在流程和离散行业的概念解析

流程行业概念流程行业中： “黄金批次”：通常指生产过程中质量最优、性能最稳定、符合甚至超越所有关键指标的特定批次产品。这类批次在流程行业中具有标杆意义，常用于质量控制、工艺优化和客户交付。核心特征在流程行业中，“黄金批次”的核心特征包括： 1、质量一…...

编程日记 2025/7/22 0:09:33

Transformer实战——循环神经网络详解

Transformer实战——循环神经网络详解 0. 前言1. 基本循环神经网络单元1.1 循环神经网络工作原理1.2 时间反向传播1.3 梯度消失和梯度爆炸问题 2. RNN 单元变体2.1 长短期记忆2.2 门控循环单元2.3 Peephole LSTM 3. RNN 变体3.1 双向 RNN3.2 状态 RNN 4. RNN 拓扑结构小结 0. 前…...

编程日记 2025/7/2 15:46:41

基于Qt的app开发第九天

写在前面笔者的课设截止时间已经越来越近了，还有不少地方的功能没有完成，所以重构一事还是放到做完整个项目、学完设计模式再考虑。目前就是继续往屎山堆屎。需求分析笔者的学长要做多线程，传数据的时候涉及到互斥锁之类的内容&#xff0…...

编程日记 2025/7/22 0:04:54

Baklib内容中台驱动资源管理创新

内容中台驱动智能整合现代企业数字化进程中，内容中台通过结构化数据治理与智能算法协同，有效解决跨系统内容孤岛问题。以Baklib为例，其核心功能通过多语言支持与API接口集成能力，实现营销素材、产品文档等异构资源的统一索引与动…...

编程日记 2025/7/19 20:34:09

项目记录：「五秒反应挑战」小游戏的开发全过程

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴灵感来源与目标设定最近我突然有个小想法：想做一个简洁但富有科技感的小型游戏，最好能…...

编程日记 2025/7/2 18:08:45

Git本地使用小Tips

要将本地仓库 d:\test 的更新推送到另一个本地仓库 e:\test，可以使用 Git 的远程仓库功能。以下是具体步骤： 在 e:\test 中添加 d:\test 作为远程仓库在 e:\test 目录中打开 Git Bash 或命令行，执行以下命令： git remo…...

编程日记 2025/7/12 0:00:07

【AWS入门】AWS身份验证和访问管理（IAM）

【AWS入门】AWS身份验证和访问管理（IAM） [AWS Essentials] AWS Identity and Access Management (IAM) By JacksonML 众所周知，AWS亚马逊云科技位列全球云计算服务第一位，并且持续为广大客户提供安全、稳定的各类云产品和服务。…...

编程日记 2025/7/13 4:09:32

【NLP】36. 从指令微调到人类偏好：构建更有用的大语言模型

从指令微调到人类偏好：构建更有用的大语言模型大语言模型（LLMs）已经成为现代自然语言处理系统的核心，但单纯依赖传统语言建模目标，往往难以满足实际应用的“人类意图”。从 Instruction Tuning（指令微调&…...

编程日记 2025/7/14 1:13:19

蓝桥杯1447 砝码称重

问题描述你有一架天平和 N 个砝码，这 N 个砝码重量依次是 W1,W2,⋅⋅⋅,WN。请你计算一共可以称出多少种不同的重量？ 注意砝码可以放在天平两边。输入格式输入的第一行包含一个整数 N。第二行包含 N 个整数：W1,W2,W3,⋅⋅⋅,WN…...

编程日记 2025/7/20 5:35:37

每日c/c++题备战蓝桥杯（洛谷P4715 【深基16.例1】淘汰赛题解）

洛谷P4715 【深基16.例1】淘汰赛题解题目大意有 (2^n) 名选手进行淘汰赛，每场比赛两人对决，能力值高者胜出；若能力值相同，则编号较小者胜出。最终决出冠军，要求输出亚军的编号。解题思路关键观察：…...

编程日记 2025/7/12 14:21:43

基于深度学习的电力负荷预测研究

一、深度学习模型框架在当今数字化时代，基于深度学习的电力负荷预测研究正成为保障电力系统稳定、高效运行的关键领域。其模型构建是一个复杂而精妙的过程，涉及多学科知识与前沿技术的融合应用。首先，要明确电力负荷预测的目标，…...

编程日记 2025/7/17 6:57:44

没有 Mac，我如何用 Appuploader 完成 iOS App 上架

没有 Mac，我如何用 Appuploader 完成 iOS App 上架｜一个跨平台开发者的实战笔记在做移动开发这些年里，唯一让我频繁想砸电脑的时刻，大概就是每次要把 iOS App 上传到 App Store。作为一个主要在 Windows 和 Linux 开发的程序员…...

编程日记 2025/7/18 4:15:33

卓力达手撕垫片：精密制造的创新解决方案与多领域应用

目录引言一、手撕垫片的技术特性与核心功能二、手撕垫片的多领域应用三、南通卓力达手撕垫片的核心优势四、未来技术展望结语引言手撕垫片作为一种创新型精密金属部件，凭借其“可分层剥离、快速安装”的特性，在工业制造、电子通信、航空航天等…...

编程日记 2025/7/12 22:50:09

[[春秋云境] Privilege仿真场景

文章目录靶标介绍：知识点卷影拷贝(VSS) 外网任意文件读取Jenkins管理员后台rdp远程登录Gitlab apiToken 内网搭建代理 Oracle RCESeRestorePrivilege提权mimikatzspn卷影拷贝提取SAM 参考文章靶标介绍： 在这个靶场中，您将扮演一名资深黑客…...

编程日记 2025/7/2 17:35:29

【工具推荐】--Git详解

本文讲诉，git命令环境的安装和git命令的介绍 Git 是一个非常流行的分布式版本控制系统，它帮助开发者管理和跟踪项目中的代码变化。通俗地说，可以认为 Git 就像是一个代码的时间机器，它记录了项目从开始到结束的每一次代码变动。 …...

编程日记 2025/7/19 4:50:51

在linux里上传本地项目到github中

首先先安装git，安装完git后，输入如下操作指令： 输入自己的用户名和邮箱（为注册GITHUB账号时的用户名和邮箱）： git config --global user.name "111"git config --global user.email "121…...

编程日记 2025/7/20 17:28:28

【基础】Windows开发设置入门8：Windows 子系统 (WSL)操作入门

前言大家熟悉的docker、Python，但对于Windows上有一套开配合开发的相对底层的环境设置，包括powershell、winget、WSL、还有开发驱动器什么的，我准备系统学一下，不然地基不牢，也盖不起冲天高楼~ 本节，介绍…...

编程日记 2025/7/18 23:21:39

服务器上的Nano 编辑器进行git合并

使用git pull拉取后，出现如下部分： GNU nano 2.9.3 /data/zhouy24Files/embody/DSLab-embodied-intelligence/.git/MERGE_MSG Merge branch …...

编程日记 2025/7/20 11:43:12

【idea 报错：java: 非法字符: ‘\ufeff‘】

执行main方法报错：: ‘\ufeff’?package cn.com 截图如下：任何一个mian都不能执行，都报这个写出来希望大家都能快速解决这种少见的问题，还不好弄。我是参考这篇文章就好了：idea 报错：java: 非法字符: …...

编程日记 2025/7/19 22:23:19

BM25（Best Matching 25）介绍与使用

BM25（Best Matching 25）是一种基于概率检索框架的改进算法，主要用于信息检索中的相关性评分。它通过引入词频饱和函数、文档长度归一化等机制，克服了传统TF-IDF算法的局限性。一、BM25的核心原理 1. 改进TF-IDF的三大维度词频…...

编程日记 2025/7/20 5:02:19

.NET 函数：检测 SQL 注入风险

以下是一个用 C# 编写的 .NET 函数，用于检测用户输入是否存在潜在的 SQL 注入风险： using System; using System.Text.RegularExpressions;public class SqlInjectionChecker {// 常见 SQL 注入关键词和模式private static readonly string[] SqlKeywor…...

编程日记 2025/7/13 9:03:50

远程数据采集智能网关支持下的雨洪资源分布式监测网络搭建实践

一、项目背景随着城市化进程的加快以及气候变化的影响，雨洪水管理成为了城市基础设施建设中的重要课题。传统的雨洪水监测手段主要依赖人工巡查和固定站点监测，存在数据获取不及时、不全面，以及在恶劣天气条件下人员安全隐患等诸多问题。为…...

编程日记 2025/7/13 23:01:33

LinuxYUM下载笔记

在基于RPM的Linux发行版（如CentOS、RHEL、Fedora等）中，YUM（Yellowdog Updater Modified）是默认的包管理工具，用于简化软件的安装、更新和依赖管理。以下是YUM的使用指南： 一、检查YUM是否安装 …...

编程日记 2025/7/21 1:34:19

研读论文《Attention Is All You Need》（7）

原文 14 3.2 Attention An attention function can be described as mapping a query and a set of key-value pairs to an output, where the query, keys, values, and output are all vectors. The output is computed as a weighted sum of the values, where the weight…...

编程日记 2025/7/12 9:51:15

CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景

1. 绝对单位 px

2. 相对单位 rem

3. 相对单位 em

4. 视口单位 vw/vh

5. 单位对比表

6. 实际开发建议

相关文章：