em,rem,vh,rpx单位的意义用法

1. em

在做手机端的时候经常会用到的做字体的尺寸单位

说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5

但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放。

2.rem

这里的r就是root的意思,意思是相对于根节点来进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

3.vh

vh就是当前屏幕可见高度的1%,也就是说height:100vh == height:100%;

但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,

但是设置height:100vh,该元素会被撑开屏幕高度一致。

4.vw

vw就是当前屏幕宽度的1%,同上width:100vh == width:100%;

5.rpx

rpx是微信推出的的一种类似于rem的换算单位,可以根据屏幕宽度自动换算。

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

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

posted on 2019-10-18 10:18  勿忘之涯  阅读(581)  评论(0)    收藏  举报

导航