rem和em的区别 vw和vh的区别

最新推荐文章于 2023-09-02 12:06:01 发布
最新推荐文章于 2023-09-02 12:06:01 发布
阅读量439 收藏
点赞数
分类专栏： css 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46306232/article/details/126796904
版权
本文详细介绍了CSS中常用的相对单位rem, em,以及视窗单位vw和vh的原理和用法。rem参照根元素的字体大小，em则根据父元素字体大小变化，vw和vh分别对应屏幕宽度和高度的百分比。理解这些单位有助于创建响应式网页设计。
摘要由CSDN通过智能技术生成

em和em都是相对单位，主要参考的标签不同：

1、rem是相对于根字号，即相对于<html>标签的font-size实现的，浏览器默认字号是font-size:16px

2、em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的，而em相对于父级字号的

vw和vh分别相对于屏幕宽度和屏幕高度的

1、vw相对于屏幕宽度，1vw相当于屏幕宽度的1%,100vw相当于满屏宽度100%,

2、vh相对于屏幕高度，1vh相当于屏幕高度的1%,100vh相当于满屏高度的100%,

Zoe.7788
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端中几个单位（em、rem、vh、vw）的区别
Jenn168的博客
08-03 2124
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是说 hei
px、em、rem、%、vw、vh单位之间的区别
01-08
本文将详细介绍px、em、rem、%、vw和vh这六个单位的区别及其应用场景。 1. **px (像素)**：像素是绝对长度单位，代表显示器上的最小物理点。1px始终表示相同大小的点，不会随浏览器窗口或用户设置变化。它适用于...
说说 em/px/rem/vh/vw 区别
MINX_minx的博客
11-16 413
em/px/rem/vh/vw 都属于 css 的单位
em,rem,vw,vh之间的区别
weixin_46953330的博客
03-16 2172
em em是相对长度单位，它是基于父元素的字体大小。 当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。 rem rem也是相对单位，但它相对的只是HTML根元素font-size的值。 vw，vh vw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。 在pc端中，指的是浏览器的可视区域。 在移动
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？
最新发布
upgrade_bro的博客
09-02 1187
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？rem是一个相对长度单位，相对于根元素，常用于响应式布局；em也是一个相对长度单位，相对于父元素
CSS布局单位之em、rem、vw和vh
wdhxs的博客
11-11 361
CSS布局单位 文章目录CSS布局单位一、em与rememrem二、使用步骤1.引入库2.读入数据总结 一、em与rem em em与rem不同于px，都是相对长度单位。 em的参考对象是父元素的font-size，其中浏览器默认的font-size是16px。当前元素设置了font-size时，则以当前元素的font-size为参考对象。 .father { /* em是相对父元素来说的 */ /* 父元素没有定义font-size则参考自己的font-size */ font-size: 10
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
浅析rem和em和px vh vw和% 移动端长度单位
12-13
本文主要探讨了rem、em、px、vh、vw以及%这几种常见的长度单位，分析它们的特点与应用场景。 1. **px（像素）** - 像素是绝对单位，表示屏幕上的一个物理点。1px始终等于1个物理点，不会因设备或浏览器设置而改变...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
本文将深入探讨CSS中五个常用的长度单位：px、rem、em、vh和vw，以及它们之间的差异。 1. **像素单位px**： 像素px是最基础的单位，它是一个固定的长度单位，类似于物理世界中的米或厘米。在屏幕上，1px代表显示器...
em，rem，vh，vw的区别
weixin_45782763的博客
11-12 465
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em 就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当 div 进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是 root 的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，也就是
【CSS】 vh、rem 和 px 的区别
小秀的博客
07-24 1253
一般来说，使用 rem 和 vh 可以更好地实现响应式设计，而 px 则更适合用于需要精确控制的情况。vh（视窗高度的百分比）是一个相对单位，表示相对于视窗高度的百分比。1vh 等于视窗高度的 1%。它可以用来设置元素的尺寸或间距，使其相对于视窗高度进行调整。它的值会根据根元素的字体大小进行相应的缩放。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。它的大小不会根据设备或浏览器的设置进行调整，是一个固定值。rem（根元素字体大小的倍数）是一个相对单位，相对于根元素（通常是。
css尺寸单位px、em、rem、vh/vw的区别是什么？
weixin_43273592的博客
07-14 357
如果HTML元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准例如，HTML元素设置了字体尺寸为 25px ，那么 2rem 就代表 50px.em是相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准例如，当前元素设置了字体尺寸为 18px ，那么 2em 就代表 36px。vw 和 vh 是相对单位，相对于当前视口。vh是相对当前视口的高，vw是相对当前视口的宽。例如，20vw 代表当前视口宽度的 20%，30vh 代表当前视口高度的 30%
em rem px vw vh用法
u012485291的专栏
10-28 721
px 像素，相对长度单位，相对于显示器屏幕分辨率而言 em相对长度单位，相对于当前对象内文本的字体大小；当前对象内的文字大小没有设置，则相对于浏览器的默认字体大小 任意浏览器默认的字体高度是16px,所有未经调整的浏览器都符合1em=16px,为了简化 font-size的换算，需要在body选择器中声明font-size=62.5%,这样是的em的值变为16px*62.5%=10px;这样
em rem vw vh是什么与联系
qq_24724109的博客
02-18 390
em：理解为相对于继承的字体大小的比例因子，默认body 为16px, 所以大多浏览器下 1em=16px; 具体的理解可以参考参考其中的第一张图 如果多个盒子嵌套，则继承的应该是父类对应的字体大小为1em 注意：当em为行高时，其对应的为其字体大小的倍数; rem：相对于页面的整体缩放过程 1rem = 1/100  × 页面的宽度 从ue图到rem的转换  ue图的元素 / ue图...
CSS度量单位rem、em、vw、vh详解
热门推荐
慕白博客
07-22 1万+
CSS度量单位rem、em、vw、vh详解 单位 说明 兼容性 em 相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化 良好 rem 相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+ vw 相对于视口的宽度...
px、em、rem、vh、vw的区别是什么？
前端小白菜
08-07 7372
px、em、rem、vh、vw
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6526
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
移动适配---em、rem 、 vw / vh的原理以及小程序的 rpx
weixin_43323097的博客
08-19 1315
em、rem 、 vw / vh、rpx
CSS面试题解析：rem, em, vw, vh与百分比的区别
`rem`, `em`, `vw`, `vh` 和百分比单位各有其特点和用途： 1. `px`: 像素单位，是绝对单位，表示具体尺寸。在屏幕分辨率不变的情况下，px大小固定。 2. `rem`: 相对单位，它相对于根元素（通常是`<html>`）的字体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值