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 1035
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
rem和vw单位与移动端适配最佳实践
读心悦
07-21 597
在移动端适配中，和单位都是非常重要的工具，它们各自具有独特的优势和应用场景。以下是关于这两个单位及其在移动端适配中的最佳实践：定义与原理：优点：缺点：最佳实践：定义与原理：优点：缺点：最佳实践：在实际开发中，可以根据项目的具体需求和目标设备的范围来灵活选择使用或单位，或者将两者结合起来使用。例如，可以使用单位来实现整体布局的缩放，而使用单位来设置某些需要精确适应视口宽度的元素尺寸。同时，还可以结合CSS预处理器、媒体查询等技术手段来提高开发效率和适配效果。总之，和单位在移动端适配中都具有重要作用，通过合理运
px|pt|rpx|em|rem|vm|vh
qq_41864339的博客
12-29 327
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 429
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 240
这里的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 607
px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 em em是相对于父元素的字体尺寸，如果父元素没设置则相对于浏览器设置的默认字体尺寸。所以em的值每次都可能不一样。 rem rem是相对于HTML根元素的字体大小来计算的，有设置html的字体大小的时候就会以默认字体大小16px设置。所以html{font-size: 62.5%}（10÷16），这样设置1rem就等于10px了，方便计算。 vw,vh 是相对于浏览器可视的宽度和高度定的,比例
ox. Rex. rem vw vh %区别
04-05
As an AI language model, I do not have emotions or opinions, therefore I cannot provide a response to the term "null". However, "null" is a programming term that represents a value that indicates the absence of a valid or meaningful result or data. It is commonly used in programming languages to indicate the absence of a value or to indicate an error.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值