rem，em，vw，vh，vm，%

最新推荐文章于 2025-05-14 13:23:59 发布
最新推荐文章于 2025-05-14 13:23:59 发布
阅读量637 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 知识点 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Lyj1010/article/details/88637548
博客介绍了前端开发中的尺寸单位。em相对于父元素字体大小，rem相对于根元素字体大小。vw相对于可视窗口宽度，vh相对于可视窗口高度，vm相对于可视窗口宽高较小值，%则相对于父元素大小。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Rem与em

em:相对于父元素的字体大小的单位。

rem:相对于根元素（html）的字体大小的单位。

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

vw（view width）

相对于可视窗口的宽度。可视窗口被均分为100单位的vw。

vh（view height）

相对于可视窗口的高度。可视窗口被均分为100单位的vh。

vm

 相对于可视窗口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）

若宽为1200px，高为800px，则取高度，1vm = 800px /100 =8px

%

相对于父元素的大小。

CSS 计量单位（px、%、ch、cm、em、ex、gd、in、mm、pc、pt、q、rem、vh、vm、vmax、vmin、vw）比较
郭宝的博客
10-24 5247
px % ch cm em 定义：em单位和%单位是一样的，一个em相当于当前标签中的字体大小(font-size)的大小，一般小数用em来表示。 示例： ex gd in mm pc pt q rem vh vm vmax vmin ...
html文件怎么生产vm页面,认识视口单位vm、vh在网页中的排版应用
weixin_42513512的博客
06-03 685
在之前的两篇关于构建模块化的文章中，谈到了 rem & em 和 响应式排版，而在文章的评论中，对基于视口单位的网页排版抱有很大的想象空间。由于视口单位涉及到计算，有一段时间我是抵制在工作使用视口单位。但就在上周，我克服了心中的抵制情绪，开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时，先了解下有哪些常见的视口单位。视口单位是什么？在 CSS 规范中，...
px、em、rem、%、vw、vh单位之间的区别
01-08
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一
px、em、rem、%、vw、wh、vm等单位有什么区别？
weixin_34199405的博客
11-29 675
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【px、em、rem、%、vw、wh、vm等单位有什么区别？】 1.背景介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项...
px、em、rem、%、vw、vh、vm 这些单位的区别
weixin_34255793的博客
05-22 630
1.px px就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 2.em em参考物是父元素的font-size，默认字体大小是16px，所以1em不是固定值，因为它会继承父元素的字体大小 3.rem rem参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可，相对于em使用...
em，rem，vh，vw的区别
weixin_45782763的博客
11-12 502
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em 就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当 div 进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是 root 的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
最新发布
全栈老李的博客
05-14 1034
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
rem和vw单位与移动端适配最佳实践
读心悦
07-21 596
在移动端适配中，和单位都是非常重要的工具，它们各自具有独特的优势和应用场景。以下是关于这两个单位及其在移动端适配中的最佳实践：定义与原理：优点：缺点：最佳实践：定义与原理：优点：缺点：最佳实践：在实际开发中，可以根据项目的具体需求和目标设备的范围来灵活选择使用或单位，或者将两者结合起来使用。例如，可以使用单位来实现整体布局的缩放，而使用单位来设置某些需要精确适应视口宽度的元素尺寸。同时，还可以结合CSS预处理器、媒体查询等技术手段来提高开发效率和适配效果。总之，和单位在移动端适配中都具有重要作用，通过合理运
px|pt|rpx|em|rem|vm|vh
qq_41864339的博客
12-29 326
px pt 参考 pt em em 参考 vh vw 参考 一. 概念解析 px:pixel,屏幕上显示数据的基本点 pt :point,印刷业常用单位 dpi(ppi):dot per inch(pixel per inch) 每英寸的像素点 rpx:responsive pixel（微信小程序专用）可以根据屏幕宽度进行自适应 em:相对于父元素的字体大小，em会继承父级元素的字体大小 rem:root em,相对于HTML根元素的字体大小 vw:view width 视口宽度 100.
px、em、rem、%、vw、wh、vmin、vmax等单位有什么区别？
chelen_jak的专栏
11-07 693
原文出处：https://blog.youkuaiyun.com/jnshu_it/article/details/77161717 (本文有修改） 1.背景介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vmin、vmax等一些新的长...
vw vh vm
weixin_44580808的博客
08-13 256
1、vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 2、vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 3、vm css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子：浏览器高度900px
vw vh vm
Jana Jing的分享
03-15 3453
1、vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 2、vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 ...
px、em、rem、vw、vh、vm、rpx这些单位的
weixin_34040079的博客
12-13 428
px是像素 em是参考父元素的font-size的倍数 rem是参考根元素的font-size 常用于响应式，一般会让html的font-size:625%,body的大小为.16rem。这样1rem就是100px； vw css3新单位，view width的简写，是指可视窗口的宽度。 vhcss3新单位，view height的简写，是指可视窗口的高度。 vmcss3新单位，相对...
px、em、rem、%、vw、vh、vm的区别
weixin_44785498的博客
03-20 642
px、em、rem、%、vw、vh、vm的区别 px px 就是 pixel 的缩写，意思是：像素 px 就是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。 px 是我们网页设计常用的基本单位。通过px可以设置固定的布局或者元素大小，缺点是不能弹性。 em em的值并不是固定的，会继承父级元素的字体大小参考物是父元素的font-size（浏览器默认字体是16px），具有继承的特点。如果自身定义了 font-size 那
em、 rem 、 vh 、vw的使用
笑对人生任我行的博客
05-11 239
这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况。的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。
CSS——px, rem , em , vw , vh，%，vm 的区别
qq_43201350的博客
10-31 435
px px就是pixel像素的缩写,相对于显示器屏幕分辨率而言。 em 参考物是父元素的font-size。 值不固定，会继承父级元素的字体大小。 rem 相对于HTML根元素的字体大小（font-size） em && rem 区别 em相对于其父元素的字体大小 rem相对于其子元素的字体大小 vw、vh、vmax、vmin vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100 假如浏览器的宽度为200px，那么1vw就等于2
说好的响应式呢？移动端适配方案探究：Rem vs Em vs vw/vh
zhaodash97的博客
04-05 1152
Em单位是相对于其父元素的字体大小来定义的。如果没有设置父元素的字体大小，默认是16px。1em等于父元素的字体大小，2em就是父元素字体大小的两倍。听起来似乎很简单，但嵌套使用时会使事情变得复杂，因为em是相对于当前元素的父元素来计算的，层层嵌套下去，计算起来就像是在玩俄罗斯套娃。
Css单位px，rem，em，vw，vh vm的区别
qq_42339350的博客
04-07 606
px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 em em是相对于父元素的字体尺寸，如果父元素没设置则相对于浏览器设置的默认字体尺寸。所以em的值每次都可能不一样。 rem rem是相对于HTML根元素的字体大小来计算的，有设置html的字体大小的时候就会以默认字体大小16px设置。所以html{font-size: 62.5%}（10÷16），这样设置1rem就等于10px了，方便计算。 vw,vh 是相对于浏览器可视的宽度和高度定的,比例
rem响应式布局
03-27
<think>好的，用户想了解REM在响应式布局中的用法，我需要根据提供的引用内容来组织回答。首先，要解释REM的基本概念，为什么它适合响应式布局，然后分步骤说明使用方法，可能还需要提到与em、px的区别，以及结合视口单位的优化方法。 首先，REM是相对于根元素（html）的字体大小，而em是相对于父元素，所以REM更统一，适合响应式设计。根据引用1，rem的标准统一，因此更适合响应式布局。而引用3提到浏览器默认1rem=16px，但通常会重置这个值以便计算。 接下来，使用方法部分需要分步骤。根据引用2，设置1rem=100px可能更方便计算，比如直接使用设计稿的px值除以100。然后，通过媒体查询调整不同屏幕下的根字体大小，或者结合vw单位让字体大小随视口变化，如引用2中的例子，设置html的font-size为(100vw/设计稿宽度)*基准值。 还要注意移动端的适配，可能需要设置viewport的meta标签，确保缩放正确。同时，可能提到使用Sass或Less来简化计算，比如引用2中的函数示例。 最后，对比rem和vw/vh，引用2和引用3都提到了两者的结合使用，比如用vw设置根字体，再用rem进行布局，这样能更灵活响应不同屏幕。 需要确保回答结构清晰，步骤明确，可能还要包括注意事项和优化技巧。同时生成相关问题，比如rem与em的区别、结合vw的方法、移动端适配等。</think>### REM 在响应式布局中的使用方法 #### 1. **REM 的基本原理** REM（Root EM）是 CSS 中的相对长度单位，**相对于根元素（即 `html` 标签）的 `font-size` 值**。例如： - 默认浏览器根元素字体大小为 `16px`，则 `1rem = 16px`[^3]； - 若设置 `html { font-size: 20px; }`，则 `1rem = 20px`。 这种特性使得 REM **标准统一**，避免了 EM 单位因父元素尺寸不同导致的混乱[^1]。 --- #### 2. **REM 实现响应式布局的步骤** ##### 步骤 1：重置根元素字体大小 通常会将 `1rem` 设置为方便计算的基准值（如 `100px`），避免默认 `16px` 带来的复杂换算： ```css html { font-size: 62.5%; /* 默认 16px × 62.5% = 10px → 1rem = 10px */ } ``` 或直接定义： ```css html { font-size: 100px; /* 1rem = 100px，设计稿尺寸可直接除以 100 转换为 rem */ } ``` ##### 步骤 2：通过媒体查询适配不同屏幕 根据不同屏幕宽度动态调整根字体大小： ```css @media (min-width: 375px) { /* 适用于 iPhone 12 等小屏 */ html { font-size: 104px; } } @media (min-width: 768px) { /* 平板 */ html { font-size: 110px; } } @media (min-width: 1200px) { /* 桌面端 */ html { font-size: 120px; } } ``` ##### 步骤 3：使用 REM 定义布局元素 将设计稿的像素值转换为 REM（例如设计稿宽度 750px，元素宽 150px → `1.5rem`）： ```css .container { width: 7.5rem; /* 750px / 100 */ padding: 0.15rem; /* 15px / 100 */ } ``` --- #### 3. **优化技巧：REM + 视口单位（VM）** 结合 `vw`（视口宽度百分比）实现更灵活的响应式布局： ```css html { /* 假设设计稿宽度 750px → 100vw = 750px → 1vw = 7.5px */ font-size: calc(100vw / 7.5); /* 100vw / 7.5 = 13.333vw → 1rem = 100px */ } ``` 此方法让根字体随视口自动缩放，无需媒体查询[^2]。 --- #### 4. **注意事项** - **移动端适配**：需在 HTML 中添加 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 确保视口正确缩放； - **兼容性**：REM 兼容主流浏览器，但旧版本 IE 需降级处理； - **计算工具**：可使用 Sass/Less 函数简化 REM 转换： ```scss @function rem($px) { @return ($px / 100) * 1rem; } .box { width: rem(200); } /* 输出 width: 2rem; */ ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值