前端问题面试问题：1rem、1em、1vh、1px各代表的含义

最新推荐文章于 2023-11-28 15:13:17 发布
最新推荐文章于 2023-11-28 15:13:17 发布
阅读量3.7k 收藏 12
点赞数 1
分类专栏： 前端面试 文章标签： css html html5 面试 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43900271/article/details/114585377
版权
1rem

相对于页面的大小，通常的做法是给html根元素设置一个字大小，其他元素的长度相对于根元素的大小。

附上: web动态设置rem链接

1em：

相对于父元素的字体大小
元素的margin/padding/width/height则相对于该元素的font-size大小

1vh/1vw：

视窗的宽度/高度。100vh/100vw相当于整个视窗的宽高。
1vh=视窗高度的1%；1vw=视窗宽度的1%

1px：

像素：相对于屏幕分辨率而言
一般电脑分辨率是1920 * 1024：即1920个像素 * 1024个像素

如有错误请予以纠正

Sylvia...
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
px、em、rem、%、vw、vh单位之间的区别
01-08
字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px ...
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
绝对长度 ...默认情况下font-size = 16px,那么1rem = 16px rem 如何修改与px的相对计算关系 我们可以在并且只能在html标签（因为html节点是根节点，就是rem里面的r：root）里面修改font-size : 32p
1px、1em、1rem、1vh / 1vw 的含义
m0_37557930的博客
04-28 6279
1、1px px像素（Pixel），相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的，一般电脑的分辨率有{1920*1024}等不同的分辨率，1920*1024 前者是屏幕宽度总共有1920个像素，后者则是高度为1024个像素。 2、1em em 就是相对于自身字体 fontSize 的大小，如果自身指定fontSize = 20px，父元素 fontSize = 30px，那么 1em = 20px；如果自身没有指定，则是继承来自于父元素的 fontSize，1em = 30px。 3、.
1rem、1em、1vh(vw)、1px各自代表的含义
BubbleABC的博客
05-17 4047
1rem、1em、1vh(vw)、1px各自代表的含义： rem 页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。 em 子元素字体大小的em是相对于父元素字体大小。 元素的width/height/padding/margin用em的话是相对于该元素的font-size。 vh、vw 全称是 Viewport Width 和 Viewport Height，视口的宽度和高度，1vh相当于 视口高度的 1%。 px px像素（P
vw、px、rem换算
元飞
01-06 9009
vw、px、rem换算 1vw=1%窗口宽度（也就是窗口宽度是100vw） 以固定宽度750px为例进行计算： ---------------------------------------------------------------------------------------------- 方法一、vw、px、rem换算（1rem = 100px）： 已知：750px = 100vw 计算：1px = (100vw / 750px) = 0.1333vw 定义：1rem = 100px （也
1rem、1em、1vh、1px各自代表的含义
weixin_43736435的博客
05-03 2996
rem 页面所有使用rem单位的长度都是相对于根元素<html>元素的font-size大小。即1rem等于根元素元素的font-size大小。 em 子元素字体大小的em是相对于父元素字体大小。 元素的width/height/padding/margin用em的话是相对于该元素的font-size。 vh、vw 全称是 Viewport Width 和 Viewport Height，视口的宽度和高度，1vh相当于 视口高度的 1%。 px px像素（Pixel），相对长度单位。像素px
前端vh和vw
Anony_me的博客
04-12 3682
1.vh vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。 2.vw vw就是当前屏幕宽度的1%，补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况 ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px ...
浅析rem和em和px vh vw和% 移动端长度单位
12-13
1.rem和em、px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12...
前端 css中1rem、1em、1vh、1px各自代表的含义
qq_40596488的博客
10-15 5459
1rem、1em、1vh、1px各自代表的含义 rem rem是全部的长度都相对于根元素 元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。 em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适
1rem、1em、1vh、1px各自代表的含义？
zybijiso666的博客
10-13 491
1px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 1em 相对长度单位。em是相对于自身字体fontSize的大小。 1rem 相对长度单位。rem是相对于根元素的fontSize的大小。 1vh/1vw 相对长度单位。vh是相对于视口高度的1%。vw是相对于视口宽度的1%。
1rem为何不能为1px
weixin_33768481的博客
02-21 882
在使用rem做适配时，大多设定在设计稿尺寸时，1rem=100px。这样在做开发时，css尺寸属性写为 （设计稿尺寸/100） rem。 然后我就在想为什么不设定在设计稿尺寸时，1rem=1px，开发时尺寸写为设计稿尺寸 rem，岂不是更方便，不用写那么多 0 和.。 在具体实践之后发现，元素的的css属性除了字体大小之外，实际效果都是1rem=12px。 /* 1rem = 1px */...
vh，vw，px，%有什么区别
最新发布
2301_79265530的博客
11-28 355
这意味着元素的宽度将根据其内部内容的大小来确定，并且会占据剩余可用空间。如果没有设置父容器的宽度限制，元素的宽度将默认为100%。时，元素的宽度可能会受到父容器的限制或其他样式的影响，例如边框、内边距、外边距等。此外，如果父容器没有具体的宽度值（例如未设置宽度或使用百分比作为宽度），那么。这意味着元素的宽度将填满父容器的可用空间，无论内部内容的大小如何。vh、vw、px和%都是用于设置CSS的长度单位，它们各自有不同的特点和使用场景。所以，这两个属性的主要区别在于宽度的计算方式和占据空间的方式。
移动端rem适配方案（解决1px 兼容问题）
sj1527382290的博客
06-18 2915
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
1px线和rem配置移动端自适应配置
zxm13253759789的博客
03-13 974
1px线 其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的， 首先我还是先介绍一下原理和所依赖的方法 原理：其实他们都是通过css3的媒体查询来实现的 步骤思路： 1、给目标元素进行相对定位 2、给目标元素添加伪元素 ::after/before 并进行绝对定位 3、判断DPI 1DPI 100% --------------使用媒体查询 ...
Rem与Px的转换
热门推荐
huang100qi的专栏
06-10 4万+
rem是CSS3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。 Rem的使用 前面说了em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的
font-size用VW来写的方法
张晨光老师的播客
02-19 1万+
我们做网页写css代码的时候，通常会在最前面写一个通用选择符。有时候为了字体的计算，我们会将文章采用10px字体。写起来就像这样： CSS *{ margin: 0; padding: 0; border: none; font-size: 10px; } 在制作响应式主题时，我们会根据所需屏幕的进行变化，并且采用VW（View-Width）来实现。 比如我们准备开发一个宽度为640的网...
css1vh等于多少px,css单位px、rem、em、vw、vh
weixin_33732812的博客
08-04 4339
css单位有两种分为相对单位和绝对单位绝对单位有:px相对单位有：rem、em、vw、vh下面我们一起来了解这几个单位吧。1、rem：相对根元素字体大小来计算1rem默认为16px当根元素有font-size时1rem的单位则是font-size的大小下面我们看这个例子html{font-size: 20px;}.rem {width: 20rem;height: 20rem;background...
1em、1rem、1vh、1px区别
06-28
### 回答1： 1em：它是CSS中一个相对单位，等于当前元素的字体大小。例如，如果一个元素的字体大小为16像素，那么1em就等于16像素。 1rem：它也是CSS中一个相对单位，等于根元素的字体大小。通常情况下，根元素是html元素。如果根元素的字体大小为16像素，那么1rem就等于16像素。 1vh：它是一个相对于视口高度的单位，等于视口高度的1/100。例如，如果视口高度为800像素，那么1vh就等于8像素。 1px：它是一个绝对单位，表示像素。在不同的设备上，1像素所占的物理空间大小可能不同。在屏幕分辨率为100dpi的设备上，1px所占据的物理空间大小为1/100英寸，约为0.25毫米。 ### 回答2： 首先，1em和1rem都表示字体大小的单位。em是根据父元素的字体大小来计算字体大小的，1em等于父元素字体大小的倍数。例如，如果父元素的字体大小为16px，则1em为16px；如果父元素的字体大小为20px，则1em为20px。而rem是根据根元素（即html元素）的字体大小来计算字体大小的，1rem等于根元素字体大小的倍数。这就意味着无论嵌套多少层元素，都会以根元素字体大小为基准来计算字体大小。 其次，1vh表示视口高度的单位，即视口高度的1%。视口可理解为浏览器中显示网页的区域大小。如果视口高度为800px，则1vh等于8px。 最后，1px表示像素的单位，是最常用的单位之一。它实际上是一个相对单位，它的大小取决于设备的像素密度。在普通屏幕上，1px等于1个物理像素；在高清屏幕上，1px可能等于2个物理像素或者更多。因此，在设计响应式网站时，应当使用相对单位，如em、rem、vh等。 总之，以上四种单位各有特点，在不同的场景下应当灵活使用，以达到最佳的设计效果。 ### 回答3： 1em、1rem、1vh、1px这四个单位都是网页设计中常用的单位，但它们的用途和意义各不相同。 1em：这个单位代表字体大小，通常用来调整字体的大小。1em等于父元素字体大小的倍数。例如，如果一个段落的字体大小为16像素，那么1em就等于16像素。如果一个标题元素有一个父元素，而该父元素的字体大小为20像素，那么1em就等于20像素。 1rem：这个单位也是代表字体大小，但是和em不同的是，1rem等于根元素(html)的字体大小。一些网页设计师习惯将根元素的字体大小设置为16像素，这样就可以使用rem单位来调整字体大小。 1vh：这个单位代表视口高度的百分比。1vh等于视口高度的1%。视口是指显示网页的区域，因此使用vh单位可以使网页元素的大小相对于视口高度自适应。 1px：这个单位代表像素大小，是最基本的单位。它用于设置网页元素的宽度、高度、边框等，通常是网页设计中最常用的单位。一个像素通常对应于显示器上的一个点。 综上所述，1em、1rem、1vh、1px这四个单位都有其独特的作用和意义。网页设计师应该充分理解这些单位的用途，以便更有效地设计出优秀的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值