Rem布局是如何实现响应式的？

从一个实际例子来看Rem布局是如何实现响应式的

首先rem是一个相对单位，指的是相对于根元素html的font-size的大小，假如根元素font-size大小为16px，那么1rem就是16px，2rem就是32px，但是px是一个绝对单位，如果我们将根元素的font-size设置为一个绝对单位，那么是无法实现响应式布局的，因此，我们可以给根元素的font-size的大小设置为一个动态单位vw。

给根元素的font-size指定为动态单位vw

请看下面的例子：

/* 100vw  -->  375px */
html {
    
    
    font-size: 26.66667vw;  /* 100 px */
}
div {
    
    
    font-size: 0.16rem;  /* 1rem -> 100 px*/
}

在看懂上面这个例子之前，我们首先介绍一个前置知识那就是vw，1vw相对的是当前屏幕宽度的1%，假如当前浏览器的视口是375px，那么100vw就是375px，而width = 100%,相对于父元素的宽度，所以会出现50vw比50%大的情况。上面的例子中，我们给html的font-size设置为26.66667vw，意味着在375宽度的屏幕上，1rem是100px，这样就能实现根元素的font-size随着视口的变化而变化。

px rem em vh vw rpx傻傻分不清？

• px：px代表的是像素，它是一个绝对单位，相对与屏幕分辨率而言的。
• rem：相对单位，相对于HTML根元素的字体大小而言的。
• em：相对单位，相对于其父元素而言的。
• vh：相对单位，相对于浏览器视口的高度而言的，1vh就是高度的1%。
• vw：相对单位，相对与浏览器视口的宽度而言的，1vw就是宽度的1%。
• rpx：rpx是微信小程序独有的，可以根据屏幕宽度进行自适应，1rpx=2px。