rem 与 vm 布局

rem 与 vm 布局

rem布局

方案：

规定 750px 尺寸下， 我们设置根字体 html 的 font-size: 100px，即 1rem = 100px

这样 750px 尺寸的 PSD 图片上，量得的宽度/高度，如 150px，写到 CSS 中的时候，需要经过换算

150px / 100px = 1.5rem

我们随着设备尺寸变化，按比例 750px / 100px 修改 html 的根字体大小

rem 随着根字体变化，则页面上所有用 rem 单位的元素大小也跟着变化

                    100px     html 根字体大小
修改比例公式为:       —————  =  ———————————————
                    750px     设备尺寸宽度大小

                    100px * 设备尺寸宽度大小
html 根字体大小 =    ——————————————————————
                            750px

监听 resize 方法，设备宽度变化时，执行上面的公式得到根字体大小，并修改 html 的根字体，实现响应式布局

vm 布局

vm 是移动端支持较好的 CSS 属性，设备宽度 = 100vm，浏览器会自动帮我们计算 1vm、12vm、..等等大小

我们在上面的 rem 布局中，750px 宽度下，设置根字体 html 的 font-size: 100px

之后需要用 js 按比例动态计算根字体的大小。然而用 js 没有用 CSS 修改的速度快

这里我们保持 750px / 100px 的比例

设备宽度 = 100vm

`1vm = 750px / 100px = 7.5px`

根字体大小为 100px，如果以 vm 为单位

根字体大小为 
`100px / 1vm = 100px / 7.5px = 13.33vm`

即在 CSS 中设置了 html 的 font-size: 13.33vm , 后续元素单位依旧使用 rem
但是我们不用再自己动态计算根字体的方法了，页面渲染速度更快