rem实现页面等比缩放
一、功能实现二、实现原理一、功能实现
第一步
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
第二步
<style>body{ font-size: 16px;}</style>
第三步
<script>var fontSize = window.innerWidth / 3.75; // 3.75为你所用的开发设备的屏幕大小除100，总之保证开发时值为100 document.documentElement.style.fontSize = fontSize + 'px';//修改html的font-size值</script>
第四步
正常编写代码，将带px单位的值除100转化为rem单位，例如: 20px => 0.2rem
推荐插件：vscode插件 px to rem ，不知道其他开发工具有没有，自己搜一下。安装好后，在扩展设置改Px-per-rem为100，选中px数值后按alt + z自动进行数值转换
二、实现原理
1、开启Web页面缩放，并对相关的选项进行设定
<metaname=“viewport” content=“width=device-width, initial-scale=1.0”>
2、设置html的font-size的值
rem单位是相对单位，根据屏幕分辨率的不同，会进行换算的，在本篇中1rem相当于100px，一般用于不同分辨率下，等比缩放的布局。
window.innerWidth / (开发设备宽)/100，动态修改用户屏幕与开发屏幕比例对应的font-size值。这里设置初始值为100px，其实设置多少都无所谓，只是设置成100方便单位转换。
3、设置body改回默认font-size
html样式将字体默认大小修改了，所以要在body处改回来。
总结： 像图片、文字、图形啥的只要都用的是rem单位，就能不改变布局实现等比缩放。
🍉🍉🍉🍉🍉🍉🍉🍉🍉🍉🍉🍉
