CSS单位 px、em、rem、vh、vw的区别

已于 2023-11-29 10:44:56 修改
阅读量484 收藏 9
点赞数 12
文章标签： css 前端 html
于 2023-11-29 10:27:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45934297/article/details/134682691
版权
px

像素，相对于显示器屏幕分辨率。

em

相对长度单位。参考物是父元素的font-size。

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸。

注：em的值并不是固定的；em会继承父级元素的字体大小；

eg：父元素字体大小设置了 8px，则 子元素 1em = 8px，2 em = 16px

rem

相对于HTML根元素的字体大小（font-size）来计算的长度单位。

如果没有设置html的字体大小，就会使用浏览器默认字体大小，一般是16px。

eg：<HTML>元素设置了字体尺寸为24px，则 2rem = 48 px

vh

viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

eg：浏览器高度为 800px，那么 1vh = 800px /100 = 8px

vw

viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

eg：浏览器宽度为 1000px，那么 1vw = 1000px /100 = 10px

vmin、vmax

vmin：vw 和 vh 中较小的值

vmax：vw 和 vh 中较大的值

如果浏览器的高为 900px，宽为 500px，则 1vmin = 5px，1vmax = 9px

nancy lyn
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？
upgrade_bro的博客
09-02 802
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？rem是一个相对长度单位，相对于根元素，常用于响应式布局；em也是一个相对长度单位，相对于父元素
详解web前端长度单位（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）
我都博客
08-17 6991
在前端开发中，会遇到各种不同类型的长度单位，比如px,em,rem等。 而整体的长度单位分为两大类： 绝对长度单位包括：in,cm, mm, q, pt, pc, px 相对长度单位包括：em, rem, %, vw, vh, vmax, vmin, vm, ch, ex
解密CSS单位：px、em、vh的区别与应用
最新发布
todoitbo的博客
04-09 928
本文将深入探讨CSS中常用的单位px、em、vh的区别与应用场景。我们将详细解释这些单位的特点，以及在实际开发中如何选择合适的单位来实现设计需求。
px转vh/vw
Amy的博客
09-18 8154
需求： 页面头部高度固定（60px），剩下的内容整体高度占满可视区的高度，并且可以随着浏览器窗口大小调整而变化。 解决： 首先想到的vh，100vh的高度刚好可以撑开整个可视区的高度。由于头部有高度剩下的内容整体高度就不能是100vh，而是100vh-60px，这就涉及到两个单位之间的转换。 可视区高度：window.innerHeight + ‘px’ = 100vh 1px = 100 / w...
css 中 px em rem % vw vh vm rpx 单位区别
qq_22243075的博客
07-11 1047
什么时候应该使用哪一个单位？
前端中网页布局px ,rem,em,vw,vh的认识和区别有哪些？
ccssr的博客
06-22 4873
网页开发中，常会涉及到各种相对单位，px,rem,em,vw,vh你是否全面了解会使用，并且可以轻易区分它们，如果你特别头疼不知道它们是什么怎么用，欢迎点击阅读收藏哦
搞清楚CSS单位px、em、rem、vh、vw、vmin、vmax
热门推荐
javaloveiphone的专栏
04-11 2万+
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 看下面例子： HTML:<body>body <div class="div1">div1 <div class="div2">div2 <div class="div3">div3
px转vw和vh的工具（对前端同学有用）
带你撸出一手好代码
10-14 6896
CSS3中有两个新尺寸单位vw和vh， 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面，这长页面是针对iPhone6的屏幕设计的。 前端开发工程师将这张设计稿转换成网页， 网页中所有的元素尺寸都用px硬编码， 那么这张网页在iPhone6中能跑的好好的，但是到了其他手机中会容易出问题， 毕竟很多手机的屏幕尺寸和iPhone6是不一样的。 vw和vh
web前端网页单位、像素、px、rpx、em、rem、vw、vh、vm、%
04-20 2074
web前端网页单位、像素、px、rpx、em、rem、vw、vh、vm、%
浅析CSS中单位px、rem、em、vh、vw之间的区别
11-20
为什么我们需要相对长度rem em等？ 固定长度已经不能满足我们现在的需求了。 举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大小也随之缩小，这样用户体验会更好...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
主要介绍了css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况的相关资料,需要的朋友可以参考下
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、em、rem之间的区别
veritable的博客
06-19 1082
1.基础概念： AngularJS 是一个JavaScript 框架，是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面，并通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。通过script标签添加到网页中： 基础用法 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 各个 ang...
px、em、 rem、vh、vw 的区别
alpha_xiao的博客
03-11 6404
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。 4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。 ...
CSS尺寸单位理解px、em、rem、vw、vh
港城大白鲨
07-13 329
掌握相对单位和绝对单位的区别，在合适的场景使用相应的单位，CSS功能日益丰富，网页内容也日益内容多样化，理解其原理，方能知其真谛！
CSS尺寸单位px、em、rem、vw、vh以及%的区别
gua551100gua的博客
10-04 201
为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。例如，当前元素设置了字体尺寸为。元素文本的字体尺寸。元素设置了字体尺寸为。
项目中常用的几种长度单位：px,em,rem,vh,vw的区别在哪里呢？
KKKKKK6668的博客
04-16 1029
目前html页面中常用的设置单位基本就是： px , rem , 百分比 。其实还有一些不常用的，比如：em，vh,vw等。 下面简单的说一下他们的区别是什么： px 是一个精准的像素单位，平时经常用感觉没什么好说的。 em 是一个相对比例单位，它是相对于父元素来说的，假如父元素的font-size为12px,本身使用2em的话 那么就是24p...
em、rem、vh、vw的理解
08-20
em是相对单位，相对于父元素的字体尺寸。如果一个元素的字体大小为1em，那么它的字体大小就等于它的父元素的字体大小。 rem也是相对单位，但是相对于根元素（通常是HTML元素）的字体尺寸。如果根元素的字体大小为16px，那么1rem就等于16px。 vh和vw是相对于视口尺寸的单位。vh表示视口的高度的百分比，vw表示视口的宽度的百分比。例如，100vh表示视口的高度的100%，50vw表示视口宽度的一半。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [em,rem,vw,vh之间的区别](https://blog.csdn.net/weixin_46953330/article/details/123526050)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS尺寸单位px、em、rem、vw、vh以及%的区别](https://blog.csdn.net/Jack_lzx/article/details/120784995)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值