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

这里是修真院前端小课堂,每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能,本篇分享的是:

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

 
1.背景介绍
传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem、vh、vw、vm等一些新的长度单位,我们可以利用这些新的单位开发出比较良好的响应式页面,随之覆盖多种不同分辨率的终端,包括移动设备等。现在让我们来看下这些长度单位有什么区别。

2.知识剖析
1、px

px就是pixel的缩写,意为像素。px就是一张图片最小的一个点,一张位图就是千千万万的这样的点构成的,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

兼容性:

2、em

参考物是父元素的font-size,具有继承的特点。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

兼容性:

 

3、rem

css3新单位,相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。

兼容性:

 

4、%

一般宽泛的讲是相对于父元素,但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort(可视窗口)

兼容性:

 

3、vw

css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。

举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

兼容性:

 

4、vh

css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。

举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

兼容性:

 

4、vm

css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm

举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。

由于现在vm的兼容性较差,这里就不做展示了。

你随便转,比例变了算我输

3.常见问题
vh vw vm实际应用场景?

4.解决方案
vh vw是不包含页面滚动条的视窗宽度(innerwidth),%包含了滚动条的宽度在里面了(outerwidth)。

一般的情况下%就可以满足大部分自适应设计的需求,可以用height:100vh做一个高度占满屏幕的自适应,没有滚动条。

用vw,vh设定的大小只和视窗大小有关,所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

5.编码实战
点击这里

6.扩展思考
css还有哪些长度单位?

in:寸

cm:厘米

mm:毫米

t:point,大约1/72寸

pc:pica,大约6pt,1/6寸

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

7.参考文献
参考一:你知道这7个css单位么

参考二:CSS长度单位值测试实例页面

 

 

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。

这里是技能树.IT修真院:http://www.jnshu.com,初学者转行到互联网行业的聚集地。"

欢迎加IT交流群565734203与大家一起讨论交流

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: rpx是小程序中的单位,可以根据屏幕宽度进行自适应缩放,适用于小程序开发。 px是像素单位,是网页开发中最常用的单位,不具有自适应性。 em是相对于父元素字体大小的单位,适用于网页开发中的字体大小设置。 rem是相对于根元素字体大小的单位,也适用于网页开发中的字体大小设置。 %是相对于父元素的百分比单位,适用于网页开发中的宽度、高度、边距等设置。 vh和vw是相对于视口高度和宽度的单位,适用于网页开发中的响应式布局。 ### 回答2: 1. rpx:rpx 是小程序中自带的一种单位,是可以根据屏幕宽度自适应的单位,即在不同设备上展示的物理尺寸相同。rpx 的设计理念是为了满足不同屏幕分辨率下 UI 图片等素材大小的自适应,它根据设备宽度进行换算,当屏幕宽度为 750 时,1rpx 就等于 1px,当屏幕宽度小于或大于 750 时,1rpx 的值也会相应缩放或放大。在开发小程序时,如果需要让视觉稿能够自动调整到不同设备上,使用 rpx 单位是非常方便的。 2. pxpx 单位是 web 开发中最常用的单位,它是一个绝对的单位,不会因为屏幕大小而变化,是一个固定的值。 3. emem 是相对单位,它是根据自身字体大小的倍数来确定元素的大小。因为 em 的值是基于父元素的字体大小计算的,所以通常用于设置文本的字体大小。比如一个元素的 font-size 为 16px,设定它的子元素 font-size: 0.5em,则子元素字体大小为 8px。 4. remrem 是相对单位,它是根据根元素的字体大小来确定元素的大小,即根元素的 font-size 所对应的值。相比 em,它更为灵活,因为根元素的字体大小可以通过 JavaScript 动态改变,因此 rem 也可以方便地实现响应式布局。 5. %:百分比也是相对单位,它是相对于包含块的大小进行计算。如果一个元素的宽度为 50%,则它的宽度大小会自动调整为包含块的一半。 6. vh 和 vw:vh 和 vw 是视口尺寸的相对单位,vh 表示视口高度的百分比,vw 表示视口宽度的百分比。如果一个元素的宽度设置为 50vw,则它的宽度将自动调整为视口宽度的一半。使用 vh 和 vw 可以方便地实现基于视口适应的响应式布局。 ### 回答3: rpxpxemrem%vw、vh 都是网页开发中经常使用的单位。在网页开发中,我们经常需要根据屏幕大小和分辨率来设置文本、元素的大小和位置。这些单位的不同使用场景也不同,下面我将详细介绍各个单位区别。 1. rpx rpx是小程序独有的单位,原意为responsive pixels,中文翻译为响应式像素。在小程序中,rpx被设计为可根据屏幕宽度自适应的单位,1rpx等于屏幕宽度的1/750。因此,rpx的使用场景主要是小程序中一些比较小的元素,如边框线、小图标等的大小或距离的设置。 2. px px是像素的意思。在Web开发中,px通常指屏幕上的一个像素点,即一个设备像素(Device Pixel)。使用px设置元素大小与距离时,元素的大小和距离不受页面缩放影响,不具备响应式设计特性。一般在设置一些固定大小元素的时候就会使用px单位。 3. em em单位是相对单位,指相对于当前元素的字体大小。例如,一个元素的字体大小为10px,那么设置它的margin为2em,表示为20pxem单位在设置字体大小时尤其有用,因为可以实现文本的相对大小调整。 4. rem rem单位也是相对单位,但是是相对于根元素的字体大小。例如,如果根元素html的字体大小为16px,那么1rem等于16px。使用rem可以实现相对大小的控制,而且可以随着页面大小的变化而变化,非常方便。 5. % 百分比单位是相对于父元素的大小。例如,如果一个元素的宽度设置为50%,则其宽度为其父元素宽度的50%%单位在设置图片大小时比较常用,可以保证图片大小与容器大小的比例不变。 6. vw和vh单位 这两个单位是针对视窗大小的相对单位vw代表视窗宽度的百分比,vh代表视窗高度的百分比。例如,一个元素的宽度设置为50vw,表示其宽度为视窗宽度的50%。这些单位在移动端的响应式开发中用得比较多。 综上所述,各个单位的使用场景是不同的。在实际开发中,需要根据不同的情况选用不同的单位来设置元素的大小或位置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值