pc与移动端适配

作者: 姜治宇 | 来源:发表于2022-03-30 08:13 被阅读0次

移动端适配及pc端跳转代码
单项目里的多终端自适应
pc与移动端适配
vue一套代码适应移动端，pc端
如何使用蓝湖设计稿同时适配PC及移动端
vue移动端总结
微信小游戏屏幕适配
PC端与移动端适配方案
适配pc端和移动端
移动端、PC端屏幕适配

建议写两套代码，pc端仍旧用px，而移动端用rem。
我们知道，rem是相对html的font-size值换算的，这个值在pc端默认是16px；而在移动端，我们可以将其直接设定为100px。vscode有个px换算rem的插件，将默认值设置为100px即可。

rem.png

也就是说，在开发阶段，把1rem=100px进行开发，等开发完成后，用如下js进行统一换算：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .cont {
            font-size:0.14rem;
            margin-top: 1rem;
            padding-left:0.5rem;
            background:chocolate;
            
        }
    </style>
</head>

<body>
    <div class="cont">
        你好
    </div>
</body>

</html>
<script>
    const getRem = (pwidth = 750, prem = 100) => {
        let html = document.getElementsByTagName("html")[0];
        let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        // if (oWidth > 600) oWidth = 600
        html.style.fontSize = oWidth / pwidth * prem + "px";
        window.onresize = function () {
            getRem(pwidth, prem)
        };
    }
    getRem(375,100);
</script>