rem与vw实现移动端响应式缩放

CSS

• 做移动端响应式页面时，通常使用vw配合rem。
• 使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改
  • 同时使用媒体查询来限定最值
• 页面中的其他元素仍使用rem为单位

实例

给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小 限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度

• 假设元素设定的rem为a，设计稿上的长度为b，单位均为px，rem为1rem对应的px
• 计算公式：(a * rem) / (实际宽度) = b / 设计稿宽度
• 则rem = (b * 实际宽度) / (a * 设计稿宽度)
• 这里我们假设设计稿宽度为750px，我们想让a为b的0.01倍（这样设计稿中元素为20px，我们马上就能方便地算出0.2rem），且实际宽度可以用100vw表示，则rem=10000vw/设计稿宽度
  • 一般不会设置为1rem=1设计稿px，因为这样字体的大小就仅仅是设计稿中的一个px，这样非常的小，不好

$vm_design: 750; //设计稿的屏幕大小
html {
    font-size: calc(10000vw / $vm_design); 
    // 1rem = 100px/750px, 即默认字体大小为100px/750px
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}
// 在其他地方可以使用rem
.warp {
  width: 5rem; /* 对应设计稿的500px/750px */
  height: 1rem;
  background-color: red;
  display: block;
  border-radius: 0.2rem;
  border-width: 0.2rem;
  border-color: blue;
  border-style: solid;
}

• child::设计稿 当然实际中font-size的设计通常会让这个font-size随vw变化平缓一点（上面的导数都为1了，变化非常剧烈），如下列设计：

/* 对应360px宽的设计稿，设计为10px => 0.1rem */
font-size: calc(100px + 2 * (100vw - 360px) / 60);