图片 9

px % em rem vw vh vm

手机网页由于无法固定每个客户端的浏览器宽度,所以一般用百分比,用百分比在某些方面始终不太方便。

大家好,我是IT修真院上海分院第1期的Web学员刘洪利,今天给大家分享一下关于css中px % em rem vw vh vm这些长度单位的区别


微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位
rpx,即 responsive pixel。
根据官方的描述:

但是微信小程序就个比较方便的 rpx。

1.背景介绍

       
在编写Web网页中,长度单位是非常常用的一个单位。通过设置长度单位对页面的内容进行调整,来达到符合要求或者说看上去舒服的效果排版效果。传统的单位有:px、%、em,而随着技术的发展,css3增加了一些新的单位rem、vh、vw、vm等,使我们的web页面能适应各种不同的终端显示,现在我们来去看下他们的意义和不同点。


rpx(responsive pixel),
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6
上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =
750物理像素,1rpx = 0.5px = 1物理像素。

就是说规定所有屏幕都是 750rpx,我们就按这个宽度来使用,尺寸单位就用
rpx。

2.知识剖析

平时我们一般会用 em 或者 rem
来做屏幕适配,而在微信小程序中,可以方便的借助 rpx 来完成这项工作。

当在不同屏幕的手机上使用时,微信会自动实现 rpx 与
px 的转换,为我们省了不少事。

2.1.px

       
px是Pixel的缩写,表示像素,所谓像素就是呈现在我们显示器上的一个个小点,每个像素点都是大小等同的,所以像素为计量单位被分在了绝对长度单位中。

那么怎么理解 rpx,还有它与 px 之间什么关系?什么是物理像素?
为了更好理解 rpx,我打算聊聊下面的一些概念:

当然,这东西也并非完美,就是在 rpx 与
px 转换时,有时候总会有那么点小数,就会产生一个四舍五入,所以我们把
750 划分为三等分,代码上看起没问题,在某些手机上显示时,就因为四舍五入,造成结果多一个像素,造成一行显示不下这三等分。所以我们可以考虑留点余量。

2.2.百分比%

       
百分比%就是相对于父元素尺寸来进行计算的,比如定义两个div元素,div1包含div2,设置父div1的width为100px,子div2的width为50%,则实际上计算的结果就是:子div2的宽度是100px*50%
= 50px。

1、如果用来设置字体,相对的是父元素的字体大小,大多数浏览器中默认的字体尺寸是100%。

2、如果用来设置宽和高等非字体尺寸,则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

像素 (Pixel)
PPI (Pixels per inch 每英尺像素)
DPR (Device pixel ratio)

2.3.em

       
相对长度单位。em是相对于当前对象内文本的字体尺寸而计算的。如果当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体(16px)尺寸。也就是1em=16px。

像素

像素,英文单词:pixel,是英语单词 「picture」 的简写 「pix」,加上
「element」 的简写 「el」,合成的词汇,表示「图像元素」的意思。
一个像素只能表达一个色块,是显示的最小的一个单元。
而在我们写代码的时候,可以把像素分为两种:

  • 物理像素 Physical pixels
  • 逻辑像素 Logical pixels

2.4.rem

       
rem和em很像,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

       
em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个参考值,从而统一整个页面的长度,只要改动根元素HTML的字体大小就可以统一比例的改动页面中所有使用rem作为长度单位的元素,而不会造成页面内布局错位。

       
需要注意的是,我们经常用的谷歌浏览器会强制页面的最小字体为12号,即使设置成
10px
最终都会显示成12px。既然html{font-size:62.5%}办不到,那换个思路,将html{font-size:625%}就好了,与html{font-size:62.5%}思路相同,只不是时将1rem
= 10px,更正为1rem = 100px而已。

物理像素

也被称为设备像素 (Device independent
pixels),即设备在出厂的时候就已经固定了像素。

我们来看一下 iPhone6 (左图) 与 iPhone6 plus (右图)
的官方显示屏的规格说明:

图片 1

iPhone6 是 1334px x 750px 的像素分辨率,意思是当手机竖放的时候,横向有
750 个物理像素,纵向有 1334 个物理像素。

2.5.vw

        vw是视窗宽度单位。1vw等于可视区宽度的百分之一。如果浏览器的宽是
500px, 1vw求得的值为 5px 。

逻辑像素

在 CSS 中也被称为 CSS 像素 (CSS pixels),是为 Web 开发者创造的,在 CSS
和 JavaScript 中使用的一个抽象的层,每一个 CSS 声明和几乎所有的
Javascript 属性都使用 CSS 像素。

例如我们平时使用 Chrome 的设备调试工具的时候,iPhone6
是高<code>667px</code>,宽是
<code>375px</code>,与苹果官方的 </code>1334px x
750px</code>,长宽分别少了 2 倍,那么面积就少了 4
倍。这就是经常说的 Retina 屏幕用四个(物理)像素表示一个(逻辑)像素。

图片 2

2.6.vh

       
与vw意义相同,同样是将视窗作为参考值,不同的是vh是视窗高度单位。1vh等于可视区高度的百分之一。如果浏览器的高是
800px, 1vh 求得的值为 8px 。

PPI

Pixels per
inch,每英寸像素,也被称为像素密度,意思是一英寸中有多少个物理像素。
其中 1英寸 (inch) = 2.54厘米 (cm)。

回顾一下上面的 iPhone6 和 iPhone6 plus 的官方规格说明图,其中有 ppi
这一项,iPhone6 是 <code>326ppi</code>,iphone6 plus 是
<code>401ppi。</code>

2.7.vm

       
严格来说,vm并不是长度单位,他是vmax和vmin这两个长度单位的一个总称

PPI 怎么算出来的?

要计算显示器的每英寸像素值,首先要确定屏幕的尺寸和分辨率。
PPI 计算公式:

图片 3

其中,

  • dp (device pixel) 为屏幕对角线的分辨率
  • wp (width pixel) 为屏幕横向分辨率
  • hp (height piexl) 为屏幕纵向分辨率
  • di (device inch) 为屏幕对角线的长度(单位为英寸)。
    以 iPhone6 为例:

图片 4

四舍五入那便是 326ppi 了。

        2.7.1.vmax

       
vmax是相对于视窗的宽度或高度的百分之一,取决于哪个更大。在宽为500px高为800px分辨率的显示器下1vm=8px。

图片 5

vmax

物理像素有多大?

「物理像素」是有特定长度的,这取决于 ppi 值。
那么如何求出一个设备的物理像素的长度?
因为绝大多数设备的物理像素都是方形的,我们可以假设当前设备的像素是方形的。
那么,

  • iPhone6 中每个像素长度:1inch / 326ppi ≈ 0.003 inch = 0.0762mm
  • iPhone6 plus 中每个像素长度:1inch / 401ppi ≈ 0.002 inch = 0.0508mm

可以看出 iPhone6 plus 的屏幕制作工艺更加精细。
因为像素越小,那么单位面积内像素点就越多,显示的效果人眼就越难看出毛刺。
用来显示一份图像的像素越多,效果就越接近现实。

和物理像素不同,「逻辑像素」没有特定的物理长度的,只是表示显示设备中最小的显示单元,优秀的显示设备完全可以把显示单元做的更加小,以达到更好的显示效果。

        2.7.1.vmin

       
vmin是相对于视窗的宽度或高度的百分之一,取决于哪个更小。在宽为500px高为800px分辨率的显示器下1vm=5px

图片 6

vmin


DPR

Device Pixel Ratio,设备像素比。
在早先的移动设备中,并没有 DPR
的概念。随着技术的发展,移动设备的屏幕像素密度越来越高。
从 iPhone4 开始,苹果公司推出了所谓的 Retina
视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的 PPI
太高,人的视网膜无法分辨出屏幕上的像素点。
iPhone4
的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是dpr = 2。

在 Chrome 浏览器可以通过以下代码获取设备的 DPR:

1let dpr = window.devicePixelRatio;

而通过下面的代码可以获取设备的逻辑像素:

1let logicalHeight = screen.height;
2let logicalWidth = screen.width;

那么很多人看到这里,就会认为:物理像素 = 逻辑像素 * dpr
但实际情况并不是这样,

留意一下 iPhone6 plus 的物理像素和逻辑像素:

  • 物理像素:1080px x 1920px
  • 逻辑像素:414px x 736px

而官方声称 iPhone6 plus 的 dpr = 3,按理应该是:

  • 414px x 736px → 乘以 3 倍 dpr → 1242px x 2208px

那么 iPhone6 plus 只有1080px x 1920px,怎么去展示
1241px x 2208px的分辨率呢?

换句话来说,本来 iPhone6 plus 的 dpr =
2.6,但是通过虚拟技术把物理像素放大 115% ,以达到 dpr = 3 的效果。

所以说是假 3 倍 dpr,其实我们开发和设计的时候也不用管这个,当作它就是 3
倍 dpr 就好了。

3.常见问题

        Q: 为什么给body的CSS样式设置font-size为62.5%?


回到 rpx

根据官方给出的 rpx 换算 px 的实例:

图片 7

三款机器的逻辑像素:

  • iPhone5 : 320px x 568px
  • iPhone6 : 375px x 667px
  • iPhone6 plus : 414px x 736px

rpx 转换成 px 是需要乘以一个系数的:

  • px = rpx * n

其中系数 n,是跟着设备改变的:

  • iPhone5: n = 2.34
  • iPhone6: n = 2
  • iPhone6 plus: n = 1.81

所以 rpx 只是定义一个绝对值 750
宽度,然后简单的根据不同设备的逻辑像素来进行 rpx 到 px 的换算。

精明的观众可能发现了, rpx 压根就不需要关心 DPR 和 PPI 的概念。
呃,其实我就是在理解 rpx
的过程中,拦不住思维的发散,了解了一大堆概念,然后顺道给你们分享一下罢了。

4.解决方案

        A: 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:
1em=16px。为了简化font-size的换算,所以需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为
16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。


5.扩展思考

        除了这些单位还有什么其他的单位?

               
ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

                pt:点(Point),绝对长度单位。大约1/72寸.

               
pc:派卡(Pica),绝对长度单位。大约6pt,1/6寸,相当于我国新四号铅字的尺寸。

                in:英寸(Inch),绝对长度单位。

                mm:毫米(Millimeter),绝对长度单位。

                cm:厘米(Centimeter),绝对长度单位。

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


6.参考文献

     
  彻底了解css中的长度单位

        视窗单位 vs
百分比单位

     
  清楚CSS单位px、em、rem、vh、vw、vmin、vmax


7.更多讨论

          Q:rpx与px之间的换算是怎么样的一个比例

          A:rpx是微信小程序开发中新出了尺寸单位rpx(responsive pixel):
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

                 如在 iPhone6
上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =
750物理像素,1rpx = 0.5px = 1物理像素。

                微信官方建议视觉稿以iPhone 6为标准.

图片 8

rpx与px之间的换算

          Q:各种单位在什么情况下用比较好?

         
A:因为vw、vh、vm(vmax、vmin)这几种长度单位的特殊性,个人建议和使用体会的话,推荐在移动端web应用上使用,毕竟手机平板这些移动产品的尺寸并不像pc这么固定,其他的长度单位,如px,这个的话,如果没有必要的话还是舍弃的好,原因是,px作为一个绝对长度单位,是无法随着设备的变化而变化的,就那么大,在手机上是这么大,在pc上也是这么大,对于网页及应用的自适应很不友好。自适应设计还是推荐用em、rem、百分比作为一个长度单位使用。


鸣谢

感谢大家观看

BY: 刘洪利

如果这篇文章对你有帮助,并且使你对修真院免费在线学习感兴趣,可以通过以下链接注册成员

ppt链接视频链接
密码
q0ar

IT修真院上海Web第1期学员刘洪利:
邀请码14898047

图片 9

发表评论

电子邮件地址不会被公开。 必填项已用*标注