px, em,rem,VW,VH,VM的不同点

最新推荐文章于 2025-05-14 13:23:59 发布
原创 最新推荐文章于 2025-05-14 13:23:59 发布 · 446 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #android #ios

本文详细解释了px, em, rem, VW, VH, VM等布局单位的区别与应用场景。px为固定单位；em与rem分别基于父元素和根元素字体大小；VW/VH基于视口宽度/高度；VM为VW与VH中较小/较大者。

px, em,rem,VW,VH,VM的不同点

  • px: 固定的单位,像素
  • em：继承父元素的字体大小
  • rem：相对根元素，即html元素字体大小，需设置html的font-size=625%

所以rem=16px*625%=100px

  • VW&VH: viewpoint width&viewpoint height

1VW = 1/100视口宽度 1VH = 1/100视口高度

例如：750*900 1VW=750/100=7.5px 1VH=900/100=9px

  • VM:分为Vmin和Vmax

Vmin,即是VW和VH较小的一个值

例如：1000*800 则 Vmin=800/100=8px

​ 600*800 则vmin=600/100=6px

Vmax,即是较大的一个值，与Vmin相反

css|说说em/px/rem/vh/vw区别?
VAN
02-06 195
css,em,px,rem,vh,vw区别
px、em、rem、%、vw、vh、vm 这些单位的区别
weixin_34255793的博客
05-22 666
1.px px就是像素，也是我们现在经常使用的基本单位，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。 2.em em参考物是父元素的font-size，默认字体大小是16px，所以1em不是固定值，因为它会继承父元素的字体大小 3.rem rem参考物是相对于根元素，我们在使用时可以在根元素设置一个参考值即可，相对于em使用...
css中长度单位px、em、rem之间的区别
veritable的博客
06-19 1353
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、vm、vh、vw的区别
langziangTom的博客
02-17 1112
px、em、rem、vm、vh、vw的区别
rem,em,vw,vh,vm的区别
Joyce的博客
04-17 1497
rem、em、vw、vh、vm都是相对单位，相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。它们之间的区别是什么呢？
视口单位vm和vh跟百分比宽度的区别
weixin_48047636的博客
04-22 607
CSS <style> /* 问题：为什么把box1设为50%的宽度，最终宽度会和box2的50vw宽度不一样？ 答：因为box1的宽度是父级body宽度的100%，但是由于body自带默认的内外边距， 所以box1的50%去掉内外边距会比box2的50vw宽度少一点， */ .box1{ width: 50%; height: 200px;
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1119
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
px rpx em rem vm vh
07-29
与 em 不同，rem 不受当前元素或父元素的影响，因此它提供了一种更一致的方式来控制整个页面的布局。 ### vw 和 vh vw 和 vh 是视窗单位，分别表示视窗宽度和高度的百分比。1vw 等于视窗宽度的 1%，1vh 等于视窗...
前端开发中 em/px/rem/vh/vw区别
乐辞的博客
09-09 1845
前端开发中 em/px/rem/vh/vw区别？传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性；从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位；利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等
jQuery插件px：简化CSS单位到像素的转换
这些单位包括长度单位（如px, in, cm, mm, pt, pc），相对长度单位（如em, ex, rem, ch），视口相对单位（如vw, vh, vm, vmin, vmax），以及vd（在当前文档中没有上下文，且不是CSS的一部分）。 8. 应用场景: 此...
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
qq_39951524的博客
10-22 1997
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
说说em/px/%/rem/vh/vw/vm的区别?
muzidigbig的博客
04-02 1170
背景介绍 我们为什么要选择合适的网页设计单位 随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。 网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。 现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。 所以需要我们选择合适的单位来进行开发，设计。 一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始
px、em、rem、%、vw、vh、vm的区别
Ldajiangyou的博客
04-07 1204
px px 就是 pixel 的缩写，意思是：像素 px 就是设备或者图片最小的一个点，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。 px 是我们网页设计常用的基本单位。通过px可以设置固定的布局或者元素大小，缺点是不能弹性。 em em的值并不是固定的，会继承父级元素的字体大小参考物是父元素的font-size（浏览器默认字体是16px），具有继承的特点。如果自身定义了 font-size 那么会按自身来计算，整个页面内1em不是一个
前端常用单位em/px/rem/vh/vm到底有什么区别？
weixin_65420702的博客
03-20 2989
前端常用单位分析
px、em、rem、%、vw、vh、vm这些单位的区别
热门推荐
weixin_42192534的博客
05-12 5万+
1.背景介绍我们为什么要选择合适的网页设计单位随着Web的发展，对新的解决方案的需求也会继续增大，对网页的要求更高。网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的demo，会有影响。现在都是要求响应式设计，需要适配各种设备，电脑，手机，平板。如果单位不合适，可能在这个设备显示良好，那个设备就会打乱布局。所以需要我们选择合适的单位来进行开发，设计。2.知识剖析1、pxpx就是pixel...
px、em、rem、%、vw、vh、vm等单位有什么区别？
weixin_34006965的博客
12-26 1225
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【px、em、rem、%、vw、vh、vm等单位有什么区别？】 px、em、rem、%、vw、vh、vm等单位有什么区别？ 大家好，我是IT修真院西安分...
Vh和Vw的简介和使用
tian361zyc的博客
05-23 1万+
Vw和Vh
vw vh vm
Jana Jing的分享
03-15 3475
1、vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。 举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 2、vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。 举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。 ...
px em rem vw vh是什么关系
最新发布
09-24
px、em、rem、vw、vh都是CSS中用于表示长度或尺寸的单位，它们之间既有区别又存在一定联系。 ### 与固定单位px的关系 px是固定像素单位，不随其他元素的尺寸变化而变化，是一个绝对单位，常用于设置边框、固定尺寸...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值