em,rem,px,rpx,vw,vh的区别与使用#记录

一、px、em、rem这三个的区别

1、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

2、em和rem相对于px更具有灵活性，更适用于响应式布局。rem是CSS3新增的一个相对单位。

3、em是相对于其父元素的字体大小来设置的，一般都是以的“font-size”为基准。而rem是相对于html根元素的“font-size”为基准，这样就意味着，我们只需要在根元素确定一个参考值。

注：任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px，1rem=16px。

二、使用场景:

rem的使用场景：一般使用于移动端，但是要想使用一份代码就适配所有屏幕，我们就可以通过媒体查询，设置html根元素字号大小，则我们在后续书写代码的时候都可以使用rem进行移动端适配。

rpx的使用场景： 是微信小程序独有的，是小程序中使用的相对单位，可以根据屏幕宽度进行自适应，不论屏幕大小。

rpx与px之间的换算：以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx=0.5px=1物理像素

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

vh：视窗高度的百分比

vmin：取当前Vw和Vh中较小的那一个值

vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度 比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px 。