小智木然
获得徽章 1
- Day33！😵移动端适配问题
1.rem适配
function setRem() {
const WIDTH = 750
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改
const scale = document.documentElement.clientWidth / WIDTH;
document.documentElement.style.fontSize = scale + 'px';
}
setRem();
window.onresize = setRem;
当页面尺寸变化时根据尺寸设置1rem的基值，实现，等比缩放
2.插件使用postcss-pxtorem
3.原理与实现
vw/vh是将屏幕直接分为100等份，1vw是1%的屏幕宽度，1vh是1%的屏幕高度
方案升级：vw+rem适配方案
前文谈到，vw的缺点是无法改变，rem的缺点是需要使用js来设置，而且它们都有各自的优点，那么可以将这两者巧妙的结合来解决这个问题。展开评论1
🏻![[泪奔]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_85.43ad2fc.png)
辛苦写的canvas粒子动画文章热度好低啊，有没有jy 舟友来看看 凑凑热闹![[快哭了]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_47.63391a1.png)