前端面试题|px、em、rem、wh、vh的使用方法和区别

最新推荐文章于 2023-09-19 22:04:06 发布
最新推荐文章于 2023-09-19 22:04:06 发布
阅读量715 收藏 1
点赞数 1
文章标签： 前端 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48491416/article/details/125517962
版权

1.px：相对长度单位。像素px是相对显示器分辨率而言的。

2.em :相对长度单位。基准点为父节点字体的大小，相对当前对象内文本的字体尺寸（继承父节点字体大小）。如果当前对行内文本的尺寸未被人为设置，则相对于浏览器的默认字体尺（16px）

3.rem:相对长度单位。‘r’ 是root的缩写，相对于根元素的字体大小（默认16px）

.div{
    //当父节点没有设置字体大小的时候，默认为16
    //16X1.5=24px
    font-size:1.5em
}
.div2{
    //根元素<html>未设置，默认为16
    //16X1.5=24px
    font-size:1.5rem
}

4.%:一般相对于父元素

4.vh 和 vw :相对视口的高度和宽度，而不是父元素的，1vw 等于视窗宽度的1%，vh也是一样的

5.vmin 和 vmax ：关于视口高度和宽度两者的最小值或者最大值

学无止境呀小徐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
面试官：说说em/px/rem/vh/vw的区别?
m0_50125215的博客
04-28 601
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、p.
2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）
iaz999的博客
04-29 3211
语义化就是构成HTML结构的标签要有意义。比如有这样的标签：header表示页面头部main表示页面主题footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
px、em、rem、%、vw、wh、vm等单位有什么区别？
weixin_34199405的博客
11-29 620
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【px、em、rem、%、vw、wh、vm等单位有什么区别？】 1.背景介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项...
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2636
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
面试题 说一说px em rem的区别
weixin_50736511的博客
12-12 418
px px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。 由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。 利用px设置字体大小及元素宽高等比较稳定和精确。 Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 em em是相对长度单位。相对于当前对象内文本的字体尺寸。 em相对于父级元素的单位，会随父级元
面试题（px、em、rem三者的区别）
weixin_55472979的博客
06-29 572
px：实际上就是像素，用px设置字体大小时，比较稳定和精准。像素px是相对于显示器屏幕分辨率而言的。 em:就是根据基准来缩放字体大小em的值并不是固定的；em会根据父级元素的字体大小变化。em相对于浏览器的默认字体尺寸。 rem:是根据根元素<html>字体大小变化，这样就意味着，我们只需要在根元素确定一个参考值。 ...
前端常见面试题：px,em,rem的区别
lucky_girl_girl的博客
02-07 5314
一.px 1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。 二.em 1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱...
17条前端面试题总结
xuzhijia1991的博客
02-23 1326
1. margin margin-top为负，元素向上移动 margin-left为负，元素向左移动 margin-right为负，布局单元向左，元素自身不动，后面元素向左。 margin-bottom为负，布局单元上移，自身元素展示不变。下面元素向上。 2. 什么是HTML语义化 html众多的标签中每一种标签都会代表一种单独的意思，比如h1-h6表示标题，ul和ol表示列表，p标签表示段落，strong标签表示强调。a标签表示超链接，img标签表示媒体图片。 每一种标签都有自己的一种意思，html是给计
2023年前端面试题集锦
wanghe1111_的博客
05-15 1663
2023年前端面试题集锦 一. Http、HTML、浏览器相关 二. CSS相关 三. js相关 四.前端性能优化点 五.前端整体框架体系学习
2023应届毕业生前端面试总结
最新发布
zayyo的博客
09-19 303
Promise.any(),Promise.allSettled()，不会让你写，但得知道，假如传入一个空数组，他们的行为会有区别吗？深拷贝⭐（实现一个乞丐版的深拷贝很简单，但是没有竞争力，要考虑到Symbol、Map、Set、Date、RegExp、循环引用问题）即使面试时候没有时间写，也要尽量口述出解决方案(推荐阅读。个人认为，应届生找工作，基础真的是重中之重，不追求过多的技能栈，已学的技能掌握越扎实越好，面试官总能在一个问题上一直深挖，如果你能一直答下去，这差距就拉开了。中间件的参数是什么？
2023高薪前端面试题（二、前端核心——移动 web 开发）
iaz999的博客
05-12 1246
cdn的原理主要答出负载均衡和缓存再就是dns解析这三部分就行了吧，通过dns解析到全局负载均衡服务器，然后再到区域的负载均衡，之后根据一些条件来找合适的缓存服务器，如果第一次访问就从源站拿过来缓存。需要注意的是一切都是根据请求的ip来的，如果ip不合理，那么可能起不到加速效果。缓存和负载均衡的思想在减轻服务器压力方面其实是很常见的。1）CDN为了改善互联网的服务质量。（提高访问速度）2）构建了全国、全球级别的专网，让用户就近访问专网里的边缘节点，降低了传输延迟，实现了网站加速。
（每日一题）面试官：说说em/px/rem/vh/vw区别?
itpeilibo的博客
09-24 179
传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等px：绝对单位，页面按精确像素展示em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值rem：相对单位，可理解为root em。
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？
upgrade_bro的博客
09-02 1201
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？rem是一个相对长度单位，相对于根元素，常用于响应式布局；em也是一个相对长度单位，相对于父元素
【前端面试之CSS】em/px/rem/vh/vw的区别
阿卡内的博客
08-02 226
em/px/rem/vh/vw的区别
前端面试题：px、rem、em、vh、vw、rpx的区别
qq_46582421的博客
01-05 563
px 像素，是相对于显示器屏幕分辨率而言的。 em 相对长度单位。相对于当前对象内文本的字体尺寸。会继承父级元素的字体大小。 rem 是相对于HTML根元素的字体大小。 vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。 ...
前端基础面试题：rem em vw vw 百分比区别？
sdasadasds的博客
07-28 452
注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...
rem、em、vh、px各自代表的含义
weixin_45954770的博客
09-21 1071
其他元素相对于根元素，也就是html字体大小计算方法：根元素字体大小乘rem的值—> 根元素的字体大小为16px，那么10rem就等同于10*16=160px。
面试题rem、em、vw\vh、px的含义
weixin_44206561的博客
08-13 1010
这些都是长度单位 rem 是相对于根元素的，通常的做法是在html元素设置一个font-size属性，其他的元素大小都是相对于根元素大小来计算的 em 是相对于父元素的，当使用width、height、padding、margin时，如果是用em做单位，此属性的大小是相对于该元素的font-size属性 vw\vh 全称viewport weight \ viewport height，视窗的大小约为屏幕大小1%，设置宽度的时候建议使用%作为单位，设置高度的时候建议使用vh作为单位 px 像素的意思，像素
css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景
imcholl的博客
06-17 3508
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：   1. em的值并不是固定的   2. em会继承父级元素的字体大小场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；vh：表示视口的高度，1vh就表示当前视口高度的百分之一；vmin：表示在vw与vh
前端面试题：px, em, rem, vw, vh 的区别解析
在面试中，面试官常常会考察候选人对px、em、rem、vw和vh等单位的理解与应用。以下是对这些单位的详细解释： ### 1. px (像素) **像素**是屏幕上的最小可寻址单元，通常用于精确控制元素大小。px 是一个绝对单位，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值