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

最新推荐文章于 2023-09-02 12:06:01 发布

学无止境呀小徐

最新推荐文章于 2023-09-02 12:06:01 发布

阅读量694

点赞数 1

文章标签：前端 javascript css3

本文链接：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 ：关于视口高度和宽度两者的最小值或者最大值

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

学无止境呀小徐

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试题|px、em、rem、wh、vh的使用方法和区别

px、em、rem、wh、vh的使用方法和区别
复制链接

扫一扫

面试官：说说em/px/rem/vh/vw的区别?

m0_50125215的博客

04-28

592

一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等二、单位在css单位中，可以分为长度单位、绝对单位，如下表所指示 CSS单位相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% 绝对长度单位 cm、mm、in、p.

px、em、rem、%、vw、wh、vm等单位有什么区别？

weixin_34199405的博客

11-29

619

这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能，本篇分享的是：【px、em、rem、%、vw、wh、vm等单位有什么区别？】 1.背景介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项...

参与评论您还未登录，请先登录后发表或查看评论

说说em/px/rem/vh/vw的区别

树上骑个猴的博客

03-31

2623

面试题说一说px em rem的区别

weixin_50736511的博客

12-12

396

px px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。利用px设置字体大小及元素宽高等比较稳定和精确。 Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 em em是相对长度单位。相对于当前对象内文本的字体尺寸。 em相对于父级元素的单位，会随父级元

面试题（px、em、rem三者的区别）

weixin_55472979的博客

06-29

553

px：实际上就是像素，用px设置字体大小时，比较稳定和精准。像素px是相对于显示器屏幕分辨率而言的。 em:就是根据基准来缩放字体大小em的值并不是固定的；em会根据父级元素的字体大小变化。em相对于浏览器的默认字体尺寸。 rem:是根据根元素<html>字体大小变化，这样就意味着，我们只需要在根元素确定一个参考值。 ...

前端常见面试题：px,em,rem的区别

lucky_girl_girl的博客

02-07

5296

一.px 1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。二.em 1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱...

前端大厂最新面试题-em_px_rem_vh_vw.docx

06-06

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

11-21

本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...

CSS中px em rem区别与使用

12-09

在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。首先，px（像素）是最常见的长度...

浅析rem和em和px vh vw和% 移动端长度单位

09-24

移动端开发中的长度单位主要有以下几种：px、em、rem、vh、vw和%。它们各自的特点和用途不同，在移动端开发中扮演着重要的角色。首先来聊聊em单位。em是一个相对单位，它指的是当前字体的字号大小。浏览器默认字体...

（每日一题）面试官：说说em/px/rem/vh/vw区别?

itpeilibo的博客

09-24

168

传统的项目开发中，我们只会用到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

1136

面试官：说一下 px、em、rem、vw/vh？em和rem的区别？rem是一个相对长度单位，相对于根元素，常用于响应式布局；em也是一个相对长度单位，相对于父元素

【前端面试之CSS】em/px/rem/vh/vw的区别

阿卡内的博客

08-02

219

em/px/rem/vh/vw的区别

前端面试题：px、rem、em、vh、vw、rpx的区别

qq_46582421的博客

01-05

558

px 像素，是相对于显示器屏幕分辨率而言的。 em 相对长度单位。相对于当前对象内文本的字体尺寸。会继承父级元素的字体大小。 rem 是相对于HTML根元素的字体大小。 vh 和vw相对于视口的高度和宽度,1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。 ...

前端基础面试题：rem em vw vw 百分比区别？

sdasadasds的博客

07-28

444

注意vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一直；如果有滚动的话，则100vw中不是包括滚动条的，100%是包括滚动条的距离的。em如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小设置，那么就相当于父元素进行设置。rem，em，vw，vh，vw属于前端开发除了px单位之外的另外几种单位取值；但是具体含义存在区别。px是像素单位，属于绝对单位，是一个具体的大小。陆荣涛前端学习交流Q群858752519。...

rem、em、vh、px各自代表的含义

weixin_45954770的博客

09-21

1063

其他元素相对于根元素，也就是html字体大小计算方法：根元素字体大小乘rem的值—> 根元素的字体大小为16px，那么10rem就等同于10*16=160px。

面试题rem、em、vw\vh、px的含义

weixin_44206561的博客

08-13

989

这些都是长度单位 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

3455

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 是一个绝对单位，...