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

【CSS】 vh、rem 和 px 的区别

news 2026/3/31 16:58:33

vh、rem 和 px 都是 CSS 中常见的长度单位，它们有以下区别：

  1. px（像素）是一个绝对单位，表示屏幕上的实际像素点。它的大小不会根据设备或浏览器的设置进行调整，是一个固定值。

  2. rem（根元素字体大小的倍数）是一个相对单位，相对于根元素（通常是 <html> 元素）的字体大小。它的值会根据根元素的字体大小进行相应的缩放。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。

  3. vh（视窗高度的百分比）是一个相对单位，表示相对于视窗高度的百分比。1vh 等于视窗高度的 1%。它可以用来设置元素的尺寸或间距，使其相对于视窗高度进行调整。

区别总结：

  • px 是绝对单位，固定值；
  • rem 是相对单位，相对于根元素的字体大小；
  • vh 是相对单位，相对于视窗高度。

使用时需要根据具体情况选择适合的单位来控制元素的尺寸和布局。一般来说，使用 rem 和 vh 可以更好地实现响应式设计，而 px 则更适合用于需要精确控制的情况。

相关文章：

【CSS】 vh、rem 和 px 的区别

vh、rem 和 px 都是 CSS 中常见的长度单位&#xff0c;它们有以下区别&#xff1a; px&#xff08;像素&#xff09;是一个绝对单位&#xff0c;表示屏幕上的实际像素点。它的大小不会根据设备或浏览器的设置进行调整&#xff0c;是一个固定值。 rem&#xff08;根元素字体大小…...

编程日记 2023/7/28 7:38:50

如何设置板子从emmc启动-针对imx6ull

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习…...

编程日记 2023/7/28 7:37:49

使用Newtonsoft直接读取Json格式文本（Linq to Json）

使用Newtonsoft直接读取Json格式文本&#xff08;Linq to Json&#xff09; 使用 Newtonsoft.Json&#xff08;通常简称为 Newtonsoft&#xff09;可以轻松地处理 JSON 格式的文本。Newtonsoft.Json 是 .NET 中一个流行的 JSON 处理库&#xff0c;它提供了丰富的功能和灵活性。…...

编程日记 2023/7/28 7:36:46

服务器用友数据库中了locked勒索病毒后怎么解锁数据恢复

随着信息技术的迅速发展&#xff0c;服务器成为现代企业中不可或缺的重要设备。然而&#xff0c;由于网络安全风险的存在&#xff0c;服务器在日常运作中可能遭受各种威胁&#xff0c;包括恶意软件和勒索病毒攻击。近日&#xff0c;我们收到很多企业的求助&#xff0c;企业的用…...

编程日记 2023/7/28 7:35:45

Linux-MariaDB数据库的备份与初始化

Linux-MariaDB数据库的备份与初始化 缘起数据库备份数据库用户查询数据库新建用户数据库权限回收数据库更新密码数据库root密码重置 缘起 Linux系统下我们比较常用的数据库软件是开源又免费的MySQL。MariaDB是MySQL的一个分支&#xff0c;采用GPL授权许可&#xff0c;完全兼容…...

编程日记 2023/7/28 7:34:43

springboot-redis使用fastjson2

1、pom 注&#xff1a;springboot2.*使用fastjson2-extension-spring5&#xff0c;3.*使用fastjson2-extension-spring6 <fastjson.version>2.0.37</fastjson.version> <!-- json --> <dependency><groupId>com.alibaba.fastjson2</groupId…...

编程日记 2023/7/28 7:33:42

SOC FPGA之HPS模型设计(二)

根据SOC FPGA之HPS模型设计(一)&#xff0c; Quartus工程经过全编译后会产生Handoff文件夹、SOPCINFO文件、SVD文件 二、生成Preloader镜像文件 通过信息交换文件Handoff文件生成Preloader&#xff0c;需要用到SOC EDS Preloader也被称为spl(Second Program Loader)或u-boot…...

编程日记 2023/7/28 7:32:41

Go基础—反射，性能和灵活性的双刃剑

Go基础—反射&#xff0c;性能和灵活性的双刃剑 1 简介2 结构体成员赋值对比3 结构体成员搜索并赋值对比4 调用函数对比5 基准测试结果对比 1 简介 现在的一些流行设计思想需要建立在反射基础上&#xff0c;如控制反转&#xff08;Inversion Of Control&#xff0c;IOC&#x…...

编程日记 2023/7/28 7:31:40

MATLAB与ROS联合仿真（慕羽☆）全套开源资料索引

自2021年9月份开始进行MATLAB与ROS联合仿真相关的研究&#xff0c;至2021年12月份研究基本上结束&#xff0c;至今&#xff0c;已经近两年时间&#xff0c;期间曾收到过很多小伙伴的私信&#xff0c;想让我出点教程&#xff0c;期间我也曾多次想要抽点时间出教程&#xff0c;但…...

编程日记 2023/7/28 7:30:39

三、深入浅出WPF之控件与布局

三、控件与布局 图形化用户界面：Graphic User Interface ,它的便捷之处在于对数据的直观性表达，把抽象性的对象通过界面的形式展现出来。很多编程都要自己的GUI工具：像java的Swing、c++的QT 、C#的winform等等. 在日常工作中我们打交道最多的控件无外乎5类： （1）布局控件…...

编程日记 2023/7/28 7:29:38

社群积分运营策略：增加用户忠诚度

构建稳固的用户忠诚度是企业私域营销中至关重要的一环&#xff0c;而社群积分运营策略成为实现这一目标的有效手段。通过巧妙利用积分激励&#xff0c;社群积分运营可以吸引用户积极参与&#xff0c;增加用户的忠诚度和活跃度。本文将深入探讨几个实用的社群积分运营策略&#…...

编程日记 2023/7/28 7:28:37

推荐用于学习RN原生模块开发的开源库—react-native-ble-manager

如题RN的原生模块/Native Modules的开发是一项很重要的技能&#xff0c;但RN官网的示例又比较简单&#xff0c;然后最近我接触与使用、还有阅读了react-native-ble-manager的部份源码&#xff0c;发现里边完全包含了一个Native Modules所涉及的知识点/技术点&#xff0c;故特推…...

编程日记 2023/7/28 7:27:36

MySQL中锁的简介——全局锁

1.锁的概述及分类 2.全局锁的介绍 给数据库加全局锁&#xff1a; flush tables with read lock;数据备份&#xff1a; mysqldump备份指令 root用户名 1234 密码 itcast数据库名称 itcast.sql备份文件名称 mysqldump -uroot -p1234 itcast >itcast.sql;数据库全局锁解锁&am…...

编程日记 2023/7/28 7:26:35

RocketMQ集群4.9.2升级4.9.6版本

本文主要记录生产环境短暂停机升级RocketMQ版本的过程 一、整体思路 1.将生产环境MQ4.9.2集群同步到测试环境&#xff0c;并启动&#xff0c;确保正常运行。 2.参照4.9.2配置4.9.6集群 3.停掉4.9.2集群&#xff0c;启动4.9.6集群&#xff0c;测试确保正常运行。 4.停掉4.9.6集…...

编程日记 2023/7/28 7:25:34

具身智能controller---RT-1（Robotics Transformer）（上---方法介绍）

具身智能controller---RT-1&#xff08;Robotics Transformer&#xff09;&#xff08;上---方法介绍&#xff09; 相关链接摘要和简介相关工作与预备知识系统概述模型 RT-1: ROBOTICS TRANSFORMER模型 相关链接 github链接 主页链接&#xff08;包括论文和训练数据集&#xf…...

编程日记 2023/7/28 7:24:33

视频内存过大如何压缩变小？这个压缩方法了解一下

在日常生活中&#xff0c;不管是日常随手拍的视频还是在工作中遇到的视频文件&#xff0c;在编辑处理的时候&#xff0c;如果视频的内存过大&#xff0c;不仅会占用很大的内存&#xff0c;在传送的时候也会花费很长时间&#xff0c;这时候将视频给压缩一下就可以很好的解决这一…...

编程日记 2023/7/28 7:23:32

【Ansible】自动化部署工具-----Ansible

自动化部署工具-Ansible 1.Ansible概述2.ansible环境安装部署2.1 command模块2.2 shell模块2.3 cron模块2.4 user模块2.5 group模块2.6 copy模块2.7 file模块2.8 hostname模块2.9 ping模块2.10 yum模块2.11 service/systemd模块2.12 script模块2.13 mount模块2.14 archive模块2…...

编程日记 2023/7/28 7:22:30

Ubuntu下安装Node.js；npm

Ubuntu下安装Node.js curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs Ubuntu下安装npm sudo apt-get install npm Ubuntu下指定版本升级npm sudo npm install npm8.15.0 -g Ubuntu下升级node 安装n模块&#xff1a;s…...

编程日记 2023/7/28 7:21:28

设计模式-模版方法模式

生活中处处存在模版&#xff0c;模版定义了大的框架&#xff0c;具体内容由使用者填充即可&#xff0c;这给很多人的生活、工作带来了很大的遍历。比如&#xff1a; PPT模版&#xff1a;好的PPT模版提供了更全面的叙述框架&#xff0c;更优美的UI画面&图标&#xff0c;提升…...

编程日记 2023/7/28 7:20:26

Linux 学习记录59(ARM篇)

Linux 学习记录59(ARM篇) 本文目录 Linux 学习记录59(ARM篇)一、IIC总线1. 概念2. IIC总线硬件连接 二、系统框图三、IIC时序1. 起始信号 / 停止信号2. 数据传输信号3. 应答信号 / 非应答信号4. 寻址信号 四、IIC协议1. 主机给从机发送一个字节(写)2. 主机给从机发送多个连续字…...

编程日记 2023/7/28 7:19:25

5分钟精通Meld文件对比工具：效率倍增的3大场景实战指南

5分钟精通Meld文件对比工具&#xff1a;效率倍增的3大场景实战指南 【免费下载链接】meld Read-only mirror of https://gitlab.gnome.org/GNOME/meld 项目地址: https://gitcode.com/gh_mirrors/me/meld Meld是一款开源的可视化文件对比工具&#xff0c;能够帮助开发者…...

编程新知 2026/3/31 15:35:22

不只是安装：深入理解TI毫米波雷达开发套件（MMWCAS-RF-EVM）的软件生态与数据流

不只是安装&#xff1a;深入理解TI毫米波雷达开发套件&#xff08;MMWCAS-RF-EVM&#xff09;的软件生态与数据流 毫米波雷达技术正在重塑自动驾驶、工业检测和智能安防等领域&#xff0c;而TI的MMWCAS-RF-EVM评估板作为行业标杆工具&#xff0c;其真正的价值往往被简化为"…...

编程新知 2026/3/31 15:00:17

如何高效使用小米手表表盘制作工具：Mi-Create完整操作指南

如何高效使用小米手表表盘制作工具&#xff1a;Mi-Create完整操作指南 【免费下载链接】Mi-Create Unofficial watchface creator for Xiaomi wearables ~2021 and above 项目地址: https://gitcode.com/gh_mirrors/mi/Mi-Create 想为你的小米手表或手环设计个性化表盘吗…...

编程新知 2026/3/31 12:35:52

优化算法中的‘0.618’魔法：黄金分割法为何是工程优化的首选入门工具？

黄金分割法&#xff1a;从古希腊美学到现代工程优化的优雅解决方案 在工程优化领域&#xff0c;算法选择往往让初学者感到困惑。面对梯度下降、牛顿法等复杂方法&#xff0c;有一种源自公元前300年的数学比例——黄金分割比&#xff08;0.618&#xff09;&#xff0c;却成为了…...

编程新知 2026/3/31 11:37:17

MedGemma-X精彩案例分享：自然语言提问触发的专业级影像分析报告

MedGemma-X精彩案例分享&#xff1a;自然语言提问触发的专业级影像分析报告 1. 重新定义智能影像诊断的新标杆 想象一下这样的场景&#xff1a;一位放射科医生面对堆积如山的X光片&#xff0c;只需要用自然语言问一句"这张胸片有没有肺炎迹象&#xff1f;"&#xf…...

编程新知 2026/3/31 11:21:11

Zemax光学设计(三)——从艾里斑到系统分辨率：衍射极限的实战解析

1. 艾里斑&#xff1a;光学的终极像素 当你用手机拍夜景时&#xff0c;为什么远处的路灯总变成模糊的光团&#xff1f;这背后隐藏着光学系统的基本限制——艾里斑。我在设计微型内窥镜镜头时&#xff0c;曾花了三周时间优化像差&#xff0c;最终却发现图像清晰度卡在一个无法突…...

编程新知 2026/3/31 11:01:05

系统架构设计师常见高频考点总结之计算机网络

学习这些网络题目时&#xff0c;可以将网络层次结构想象成高速公路系统&#xff1a;核心层是连接城市的大型立交桥和主干道&#xff0c;追求极速转发&#xff1b;汇聚层是出口闸机&#xff0c;负责检查通行证&#xff08;安全过滤&#xff09;和分流&#xff1b;而接入层则是通…...

编程新知 2026/3/31 10:06:22

uniapp 如何实现google登录-安卓端

uniapp 如何实现google登录-安卓端 本文只讲解uniapp安卓端如何获取到idToken来实现登录&#xff0c;ios使用uniapp官方方法可以获取 海外app貌似最常用的就是邮箱登录&#xff0c;在app上表现出来最常用的就是谷歌一键登录&#xff0c;或者邮箱加网页验证&#xff1b;google登…...

编程新知 2026/3/31 7:25:10

AEC-Q100到AEC-Q200：汽车电子组件认证标准差异与应用场景详解

AEC-Q100到AEC-Q200&#xff1a;汽车电子组件认证标准差异与应用场景详解 当一辆现代汽车驶过零下40度的北极圈&#xff0c;又穿越50度的沙漠高温&#xff0c;其电子系统仍需要保持毫秒级的响应精度——这种极端可靠性背后&#xff0c;是AEC-Q系列认证标准构筑的质量防线。作为…...

编程新知 2026/3/31 6:10:33

4个关键步骤：开源散热控制解决Dell G15温度难题

4个关键步骤&#xff1a;开源散热控制解决Dell G15温度难题 【免费下载链接】tcc-g15 Thermal Control Center for Dell G15 - open source alternative to AWCC 项目地址: https://gitcode.com/gh_mirrors/tc/tcc-g15 在游戏本使用过程中&#xff0c;散热控制往往是影响…...

编程新知 2026/3/31 4:03:01