响应式

响应式原理，是在 pc 开发中 resize 页面时，或者在移动端布局时，都会需要根据屏幕的变化或屏幕大小去适配UI的整体大小。让我们看看吧！

方案一： rem

rem 是相对长度单位，相对于 根元素，常用于响应式布局
em 是相对长度单位，相对于 父元素，不常用
px 是绝对长度单位

rem的弊端：
具有 ”阶梯性“。需要设置对应的场景去适配对应的rem。无法预先适配所有场景。
结合 flexible.js 可以动态更改 根font-size;

flexible原理

方案二： vw vh vmax vmin

先了解下网页视口尺寸
window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度 （vh 、vw 就是相对于这个网页视口的百分一）
document.body.clientHeight // 页面内容 body高度

vmax 取 vh 和 vw 最大值
vmin 取 vh 和 vw 最小值

方案三： 媒体查询 media-query + rem

@media only screen and (max-width: 374px) {
    /* ihone5 or little more, use ihone5 width 320px to set font-size */
    html { font-size: 86px }
}
@media only screen and (min-width: 375px) and (max-width: 374px) {
    /* ihone6 7 8 and iphonex */
    html { font-size: 100px }
}
@media only screen and (max-width: 414px) {
    /* ihone6p or bigger more, use ihone6p width 414px to set font-size */
    html { font-size: 110px }
}

根据不同屏幕宽度设置 根元素 font-size

---

移动端常见适配方案
移动端常见适配方案
基于vw等viewport视区单位配合rem响应式排版和布局
juejim移动端适配方案汇总