【前端】移动端适配问题-rem
例如React项目
1、在index.html根文件中
在head中设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
2、在main.tsx中
//动态获取并设置移动端的适配 document.documentElement.style.fontSize = 100 / 750 + 'vw';
**注：**把代码加到ReactDOM.createRoot()上方，然后重启项目
3、如何使用
平常
.box{ padding: 5px; font-size:18px; border-radius:50px; }
设置移动端适配后
.box{ padding:10rem; font-size:36rem; border-radius:100rem; }
总结：
1px=2rem
16px=32rem
50px=100rem
二倍关系
一套代码多端运行
如果是布局问题，可以配合媒体查询使用。
