html pc页面自动缩放,WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

一、rem 和 vw 简介

1. rem

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

示例

若根元素 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: