web前端入门到实战：通过 rem 和 vw 实现页面等比例缩放自适应

一、rem 和 vw 简介

1. rem

rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。

浏览器支持：Caniuse

示例

• 若根元素 font-size 为 12px

html {
    font-size: 12px;
}
h1 { 
    font-size: 2rem;  /* 2 × 12px = 24px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 12px = 18px */
}
div {
    width: 10rem;  /* 10 × 12px = 120px */
} 

• 若根元素 font-size 为 16px

html {
    font-size: 16px;
}
h1 { 
    font-size: 2rem;  /* 2 × 16px = 32px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 16px = 24px */
}
div {
    width: 10rem;  /* 10 × 16px = 160px */
} 
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

2. vw

vw 是相对长度单位，相对于浏览器窗口的宽度，浏览器窗口宽度被均分为100个单位的vw

浏览器支持：Caniuse