运用rem等比例还原页面及适配PC

亚里士多德芙
30 阅读5分钟

使用px单位开发移动端（H5）的时候，常常遇到一个问题：设计稿的宽度是375，开发出来的页面放到不同比例的真机，呈现的效果不一样。在较大的手机中，页面的按钮和字体会稍小，这时候我们就得与UI设计师进行解释...

回到正文，这几天接到任务，需要开发一个简单中转页，要求是适配移动端和PC端。 最终，我采用了rem+媒体查询的方式实现（代码在页尾）。

image.png

rem等比例控制：

 :root {
            font-size: 16px;
            /* 默认根元素字体大小 */
        }

 <script>
        function setRemUnit() {
            // 设置rem 相对大小
            const baseSize = 100; // 设计稿宽度为375px时，1rem = 100px
            const scale = document.documentElement.clientWidth / 375;
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 可选项：最大不超过2倍大小
            
        setRemUnit();
        window.addEventListener('resize', setRemUnit);
    </script>

主要思路是查询屏幕宽度，然后根据设计稿宽度计算得到比例，再根据这个比例去设置根元素的字体大小。 rem这个单位会根据根元素的大小进行调节！

媒体查询切换pc端效果

/* 媒体查询 大于576px可视为pc端 */
        @media (min-width: 576px) {

            html,
            body {
                background-color: #e4d3f7;
            }

            .content-wrap {
                text-align: center;
                display: flex;
                flex-direction: column-reverse;
                /* min-height: 100vh; */
                background: url('./assets/img/pcBg@2x.png') no-repeat;
                background-size: 100% auto;
            }

            /* 中间内容 */
            .content-wrap-text {
                font-size: 20px;
                line-height: 32px;
                margin-bottom: 36px;
            }

            /* 按钮 */
            .content-wrap .btn-box {
                margin-bottom: 86px;
            }

            .content-wrap .btn-box .btn {
                font-size: 22px;
                padding: 16px 92px;
                max-width: 360px;
                margin: auto;
            }


            /* 底部链接及版权 */
            .content-wrap .footer-item {
                margin-bottom: 20px;
                padding: 0 48px;
                display: flex;
                justify-content: space-between;
                flex-direction: row-reverse;
                font-size: 16px;
            }

            .content-wrap .footer-item .explain-btn-item {
                flex: 0 0 20%;
                display: flex;
                justify-content: space-between;
                padding: 0;
                min-width: 222px;
            }

            .content-wrap .footer-item .explain-btn-item a {
                color: #6E43B1;
            }

            .content-wrap .footer-item .footer-item-copyright {
                color: #474645;
                margin-top: 0;
            }
        }

当屏幕宽度大于某个临界点，页面就更换为另一套样式。 PC页面，我们不采用rem，直接用px单位。

image.png

避免出现滚动条

浏览器开发者模式时，我们给页面设置一个min-height=100vh，从而可以让页面刚好撑开。 但是呢，切换到真机safari浏览器时，会出现滚动条，所以min-height=100vh这种方式并不完美。

我们可以通过js查询屏幕高度，然后将这个高度值设给min-height，从而避免滚动条。

主要代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#FFF">
    <title>立橋銀行 | 立足港澳·橋連世界</title>
    <meta name="description"
        content="立桥银行成立于1996年，是澳门的一家全牌照商业银行。银行前身是新银行亚洲股份有限公司，为葡萄牙的新银行在澳门的一家分行。新银行亚洲股份有限公司自2017年9月起更名为立桥股份有限公司。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <style>
        :root {
            font-size: 16px;
            /* 默认根元素字体大小 */
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        @font-face {
            font-family: "ResourceHanRoundedCN-Regular";
            src: url("./assets/fonts/ResourceHanRoundedCN-Regular-zwh20250210.woff2");
        }

        html,
        body {
            background-color: #efe4f9;
            font-family: "ResourceHanRoundedCN-Regular";
        }

        .content-wrap {
            text-align: center;
            display: flex;
            flex-direction: column-reverse;
            /* min-height: 100vh; */
            background: url('./assets/img/mobileBg@2x.png') no-repeat;
            background-size: 100% auto;
        }

        /* 中间内容 */
        .content-wrap-text {
            font-weight: bold;
            color: #3D3D3D;
            font-size: 0.18rem;
            /* 18px */
            line-height: 0.25rem;
            /* 25px */
            letter-spacing: 0.01rem;
            /* 1px */
            margin-bottom: 0.74rem;
        }

        /* 按钮 */
        .content-wrap .btn-box {
            margin-bottom: 0.3rem;
            /* 30px */
            padding: 0 0.54rem;
        }

        .content-wrap .btn-box .btn {
            background: linear-gradient(63deg, rgb(160, 121, 216) 0%, rgb(72, 34, 137) 100%);
            border-radius: 0.32rem;
            /* 32px */
            box-shadow: rgba(124, 92, 170, 0.2) 0rem 0.01rem 0.02rem 0rem;
            font-size: 0.17rem;
            /* 17px */
            color: #FFFFFF;
            padding: 0.12rem 0.6rem;
            /* 12px 60px */
            text-decoration: none;
            display: block;
        }

        /* 底部链接及版权 */
        .content-wrap .footer-item {
            margin-bottom: 0.2rem;
            /* 20px */
            display: flex;
            flex-direction: column;
            font-size: 0.13rem;
            /* 13px */
        }

        .content-wrap .footer-item .explain-btn-item {
            display: flex;
            justify-content: space-around;
            padding: 0 0.6rem;
            /* 0 60px */
        }

        .content-wrap .footer-item .explain-btn-item a {
            color: #6E43B1;
            display: inline-block;
        }

        .content-wrap .footer-item .footer-item-copyright {
            color: #474645;
            margin-top: 0.1rem;
            /* 10px */
        }

        /* 媒体查询 大于576px可视为pc端 */
        @media (min-width: 576px) {

            html,
            body {
                background-color: #e4d3f7;
            }

            .content-wrap {
                text-align: center;
                display: flex;
                flex-direction: column-reverse;
                /* min-height: 100vh; */
                background: url('./assets/img/pcBg@2x.png') no-repeat;
                background-size: 100% auto;
            }

            /* 中间内容 */
            .content-wrap-text {
                font-size: 20px;
                line-height: 32px;
                margin-bottom: 36px;
            }

            /* 按钮 */
            .content-wrap .btn-box {
                margin-bottom: 86px;
            }

            .content-wrap .btn-box .btn {
                font-size: 22px;
                padding: 16px 92px;
                max-width: 360px;
                margin: auto;
            }


            /* 底部链接及版权 */
            .content-wrap .footer-item {
                margin-bottom: 20px;
                padding: 0 48px;
                display: flex;
                justify-content: space-between;
                flex-direction: row-reverse;
                font-size: 16px;
            }

            .content-wrap .footer-item .explain-btn-item {
                flex: 0 0 20%;
                display: flex;
                justify-content: space-between;
                padding: 0;
                min-width: 222px;
            }

            .content-wrap .footer-item .explain-btn-item a {
                color: #6E43B1;
            }

            .content-wrap .footer-item .footer-item-copyright {
                color: #474645;
                margin-top: 0;
            }
        }
    </style>
</head>

<body>
    <div class="content-wrap">
        <div class="footer-item">
            <div class="explain-btn-item">
                <a href="https://wlbank.com.mo/privacy" target="_blank">隱私條款</a>
                <a href="./pages/disclaimer.html">免責聲明</a>
                <a href="./pages/contactUs.html">聯絡我們</a>
            </div>
            <div class="footer-item-copyright">©<span id="yearText"></span>立橋銀行股份有限公司版權所有</div>
        </div>
        <div class="btn-box">
            <a role="button" class="btn" flag="normal" aria-disabled="false"
                href="https://www.wlbank.com.mo"><span>返回立橋銀行官網</span></a>
        </div>
        <div class="content-wrap-text">
            <div>當前鏈接已達到安全訪問次數限制，</div>
            <div>請重新獲取鏈接。</div>
        </div>
    </div>
    <script>
        function setRemUnit() {
            // 设置rem 相对大小
            const baseSize = 100; // 设计稿宽度为375px时，1rem = 100px
            const scale = document.documentElement.clientWidth / 375;
            document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 可选项：最大不超过2倍大小


            // 获取屏幕高度，设置页面最小高度，防止出现滚动条
            var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            document.querySelector('.content-wrap').style.minHeight = screenHeight + 'px';
        }
        
        setRemUnit();
        window.addEventListener('resize', setRemUnit);

        // 动态年份
        document.getElementById("yearText").textContent = new Date().getFullYear();
    </script>
</body>

</html>
avatar
文章
阅读
粉丝