px、%、em、vw、vh、vmax、vmin、rem区别

px

很多人都认为它是一个固定单位，但其实它是个相对单位。它是相对于屏幕的分辨率的，但平时会把它当固定单位来用，毕竟谁写个页面老是切换自己电脑分辨率来看变化。

%

相对于自己的父级，父子关系哈，不是爷孙关系。只是相对于自己的父级。

em

相对于自己的字体大小。具体就是，如果自己设置了字体大小，那么你设置width:1em;就会相对于自己，如果自己没有设置，它就会逐级向上找或者说它自己继承于谁的字体大小，如果谁都没设置字体大小，那就是浏览器默认的字体大小，就是16px，此时就是1em=16px了。所以一定不要以为em是相对于父级了，是相对于自己或者继承过来的字体大小，没有就是浏览器默认的16px。

vw

相对于浏览器可视区的宽度，单位是1vw=1%，可视区的宽度不是屏幕宽度哈，这里需要注意，不是指你的屏幕可视区，而是相对于浏览器的可视区大小。

红框内的就是可视区，不包括地址栏哪些

vh

vw是相对于浏览器可视区的宽度，那么vh就是相对于浏览器可视区高度了撒。

vmax

这东西怪的很，怪的是用这个来布局的都是大神了吧。
vmax指浏览器可视区的宽、高，以最大的进行百分计算。

vmin

vmax指的是浏览器的可视区的宽高，以最大进行百分比的计算，那vmin就是以最小的进行百分比的计算。

rem

现在最好用的莫过于rem了，它指的是相对于根字体的大小。比如你在css中这么设置了一个样式：

html{font-size:20px;
}

设置这么一段话，意思就是html标签内的字体大小就是20px了，那单位换算就是1rem=16px了，如果你不设置font-size，就是浏览器的默认大小了，即16px。
也许会有疑问，为啥不设置html的font-size为10px呢？这样不就更好计算了吗？这里需要注意的是，浏览识别最小的字体大小是12px，10px还是当12px处理的。

因为rem布局因为不同分辨率的问题，可能会造成布局些许差异，此时就需要在页面加载时候就获取一下屏幕大小好一些，具体代码如下

window.onload = window.onresize = function () {document.documentElement.style.fontSize = 20 * document.documentElement.clientWidth / 375 + 'px';
}

这句代码的作用就是页面初始化和页面大小发生变化时就会起作用了，都会重新设置html的font-size，
其中20px指的是你在某某分辨率下设置的字体大小，具体看你自己，不一定是20px，375就是你以什么宽度的分辨去做的。就会变成一个等比缩放啦。还是自动计算的。

最后一个疑问可能就是，为啥设置字体式font-size:20px，而你设置width:10rem，也起作用，这样宽度就设置成了200px了，关于这个问题，笔者也只是知道是怎么用，至于为什么设置的font-size，而你在width设置宽度也起作用，笔者就不知道了，有知道原因的，可以在评论区留言。