【前端】移动端适配方案-rem

【前端】移动端适配问题-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

二倍关系

一套代码多端运行

如果是布局问题，可以配合媒体查询使用。