[html] 移动端布局的自适应如何做？

移动端的布局，如果是采用框架的话，小程序和uni-app等都有响应式单位rpx来做自适应。
如果单纯的用Vue或React的话，一般来说就是flex配合rem或者vw布局来实现自适应。
rem布局的原理是根据rem是相对于根字体大小而改变的， 例如设计稿是750px大小的，可以设置一个转换比例来做适配：const width = document.document.documentElement.clientWidth // 获取当前屏幕的宽度，例如苹果6是375
const designWidth = 750 // 设计稿的宽度
// 下面计算比例，我们以1:100来计算（因为整除100好算，当然可以通过vscode插件）：
const ratio = 375 / 750 * 100 // 就用这个来设置为根字体大小
document.querySelector('html').style.fontSize = ratio + 'px'
document.querySelector('body').style.fontSize = '16px'  // 因为设置了跟字体大小，会影响到其他的样式，所以要通过body还原
这样假如设计稿的一个`div`是100px，我们可以处以比例（100），即`1rem`。
div { width: 1rem; } // 所以在375px里面就是50px的宽度。vw的话，是100vw即可以铺满整个屏幕，这个相对于rem更加简单，只是可能兼容性不如rem布局，实现：// 假设设计稿是750px
const ratio = 750/100 = 7.5;  // 除以100是因为屏幕宽度恒定为100vw
//假设一个`div`是`375px`大小
div { width: 3.75vw; }  // 3.75vw在375px的屏幕下就是一般，即187.5px

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题