前端必备面试题：px,vw/vh,rem的区别

最新推荐文章于 2023-10-22 10:33:28 发布
最新推荐文章于 2023-10-22 10:33:28 发布
阅读量903 收藏 2
点赞数
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52223183/article/details/131851483
版权

在前端开发中，选择合适的长度单位对于实现响应式设计和保持页面一致性非常重要。本文将介绍像素(px)、视窗单位(vw/vh)和根元素单位(rem)之间的区别，以及在实际应用中如何选择合适的长度单位。

1. 像素(px)

像素(px)是最常见的长度单位，它表示页面上的一个物理像素点。像素是一个固定单位，在不同的设备和屏幕上，1个像素的大小保持不变。使用px作为长度单位时，元素的大小在不同的设备和屏幕上是稳定的。例如，width: 200px;表示该元素的宽度为200个像素。

2. 视窗单位(vw/vh)

视窗单位(vw/vh)是相对于浏览器视窗大小的长度单位。vw表示视窗宽度的百分比，vh表示视窗高度的百分比。这意味着无论视窗的大小如何变化，元素的大小也会跟随调整。例如，width: 50vw;表示该元素的宽度为视窗宽度的50%。视窗单位特别适合实现响应式设计，使元素能够根据屏幕大小自适应调整。

3. 根元素单位(rem)

根元素单位(rem)是相对于根元素（通常是<html>元素）字体大小的单位。rem的值会根据根元素的字体大小进行计算。如果根元素的字体大小为16px，那么1rem等于16px。通过设置根元素的字体大小，可以影响整个页面中使用rem作为单位的元素的大小。例如，如果将根元素的字体大小设置为10px，那么1rem等于10px。根元素单位可实现整体的大小调整，适用于不同屏幕尺寸下的一致性要求。

如何选择合适的单位

  • 当需要固定的长度尺寸时，像素(px)是合适的选择，保证元素的固定大小不受屏幕改变的影响。
  • 当需要实现可伸缩自适应的设计时，视窗单位(vw/vh)是理想的选择，能够根据屏幕大小动态调整元素的大小。
  • 当需要根据整个页面的字体大小来调整元素大小时，根元素单位(rem)是一个不错的选择，使元素可以跟随整体大小的改变。

在实际应用中，根据具体需求和实际场景选择适当的单位是至关重要的。同时，还要考虑到浏览器兼容性和支持度。常见的做法是将相对单位和绝对单位结合使用，以便灵活地控制页面布局的各个方面。

总结起来，了解像素(px)、视窗单位(vw/vh)和根元素单位(rem)的不同特性，根据需求选择适合的长度单位，可以实现响应式设计并确保页面在不同设备和屏幕上呈现一致的效果。

zqq627
关注
前端css高频面试题——em/px/rem/vw/vh的区别？
weixin_47450807的博客
04-06 487
一、px px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大 小等同的，所以像素为计量单位被分在了绝对长度单位中。有些人会把px认为是相对 长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的。这里之 所以认为px为绝对单位，在于px的大小和元素的其他属性无关。 二、em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺 寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。为了简化 font-size 的换算，我们需
前端基础面试题：rem em vw vw 百分比区别？
sdasadasds的博客
07-28 477
注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...
postcss-px2vw:一款 PostCSS 插件，将 px 转换成 vw 和 rem
08-04
postcss-px2vw 一款 插件，将 px 转换成 vw 和 rem。 该插件主要结合了 和 的功能，精简了不常用的配置。默认将 vw 作为优先单位使用，以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem，这款插件很好的解决了该问题。 安装 $ npm i @moohng/postcss-px2vw -D 使用 // .postcssrc.js module.exports = { plugins: { '@moohng/postcss-px2vw': {} } } 举例： // input .class { border: 1px solid black; margin-bottom: 1px; font-size: 20px; line-height: 30px; } // output .class { border
前端常见面试题：px,em,rem的区别
lucky_girl_girl的博客
02-07 5330
一.px 1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。 二.em 1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱...
【CSS】 vh、rem 和 px 的区别
小秀的博客
07-24 1389
一般来说，使用 rem 和 vh 可以更好地实现响应式设计，而 px 则更适合用于需要精确控制的情况。vh（视窗高度的百分比）是一个相对单位，表示相对于视窗高度的百分比。1vh 等于视窗高度的 1%。它可以用来设置元素的尺寸或间距，使其相对于视窗高度进行调整。它的值会根据根元素的字体大小进行相应的缩放。例如，如果根元素的字体大小为 16px，那么 1rem 就等于 16px。它的大小不会根据设备或浏览器的设置进行调整，是一个固定值。rem（根元素字体大小的倍数）是一个相对单位，相对于根元素（通常是。
px、em、rem、%、vw、vh单位之间的区别？
zzyaiaad的博客
08-12 357
1.px px就是 pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率； 2.em 参考父元素的font-size,具有继承的特点。浏览器默认字体是16px, 整个页面内1em不是一个固定的值; 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式， 我们可以计算下： class为id1的div字体大小继承自父元素body： 16px*1.5em = 24px class为id2的div字体大小继...
前端中网页布局px ,rem,em,vw,vh的认识和区别有哪些？
ccssr的博客
06-22 5073
网页开发中，常会涉及到各种相对单位，px,rem,em,vw,vh你是否全面了解会使用，并且可以轻易区分它们，如果你特别头疼不知道它们是什么怎么用，欢迎点击阅读收藏哦
前端面试题：px, em, rem, vw, vh 的区别解析
在面试中，面试官常常会考察候选人对px、em、rem、vw和vh等单位的理解与应用。以下是对这些单位的详细解释： ### 1. px (像素) **像素**是屏幕上的最小可寻址单元，通常用于精确控制元素大小。px 是一个绝对单位，...
前端大厂最新面试题-em_px_rem_vh_vw.docx
06-06
前端大厂最新面试题-em_px_rem_vh_vw 以下是对前端大厂最新面试题-em_px_rem_vh_vw的知识点详细解释： 一、单位的概念 在CSS中，单位可以分为长度单位和绝对单位。长度单位可以进一步分为相对长度单位和绝对长度...
px、rpx、em、rem 、vw/vh、百分比的区别？
sisterAn的博客
08-06 1892
px：绝对长度单位，来描述一个元素的宽高以及定位信息 rpx：微信小程序独有的、解决屏幕自适应的尺寸单位 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。 rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，.
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？
upgrade_bro的博客
09-02 1272
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？rem是一个相对长度单位，相对于根元素，常用于响应式布局；em也是一个相对长度单位，相对于父元素
px、em、rem、%、vw、vh、vm这些单位的区别
热门推荐
weixin_42192534的博客
05-12 5万+
1.背景介绍我们为什么要选择合适的网页设计单位随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。2.知识剖析1、pxpx就是pixel...
em,rem,vw,vh之间的区别
weixin_46953330的博客
03-16 2200
em em是相对长度单位，它是基于父元素的字体大小。 当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。 如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值。 rem rem也是相对单位，但它相对的只是HTML根元素font-size的值。 vw，vh vw 就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。 在pc端中，指的是浏览器的可视区域。 在移动
vw px rem之间换算
weixin_45000975的博客
03-24 9989
一、vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width)。1vw = 1% * 视口宽度。也就是说，一个视口就是100vw。 2.px:px应该是在css中使用最为普遍的单位了吧。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的，是相对长度单位。在桌面浏览器中，1个像素往往是对着电脑屏幕的1个物理像素，但是在移动端，随着Retina屏的流行，分辨...
rem和vw的分析比较
前端啤酒屋
10-15 6680
rem： 首先rem是css单位，相比于px固定的像素单位，rem是相对像素单位，更加的灵活。 需求存在： 现在移动端各种屏幕的出现，适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。 一、基本原理： 我们在页面中写rem，由于rem是相对于根元素字体大小来计算的，那么就可以实现自适应的效果。 Rem原理举例： 设计稿宽度：x px 移动设备宽度：y px Html中font-size...
px,rem,em,vw,vh区别
weixin_53315593的博客
03-17 365
的元素是相对于已定位的父元素，即上一个有非static的position属性的上级元素；的元素是相对于ViewPort（可视窗口）vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100。vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100。假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）假如浏览器的高度为500px，那么1vh就等于5px（500px/100）1、对于普通定位元素就是我们理解的父元素。一般来说就是相对于父元素。
px、rpx、em、rem、vw、vh各种像素单位的区别
weixin_47340917的博客
01-18 9922
px、rpx、em、rem、vw、vh各种像素单位的区别 px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。 rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应，1rpx实际上等于相对于屏幕宽度的1物理像素。在设计时可以将1px约等于2rpx。 em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-si
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
最新发布
qq_39951524的博客
10-22 1308
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
说说em/px/rem/vh/vw的区别
树上骑个猴的博客
03-31 2660
一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等 二、单位 在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、px
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值