CSS 相关代码：

                * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            font-size: 12px;
        }
        a {
            font-size: 12px;
            text-decoration: none;
            color: black;
        }
        img {
            height: 100%;
            vertical-align: top;
            border: none;
        }
        .header-container {
            width: 100%;
            height: 2.5rem;
            background-color: #ccc;
        }
        .navbar {
            height: 100%;
            display: flex;
            justify-content: space-between;
        }
        .navbar-logo-container {
            width: 8rem;
            display: flex;
            justify-content: center;
        }
        .navbar-download-container {
            display: flex;
            width: 5rem;
            align-items: center;
        }
        .navbar-download-btn {
            width: 4rem;
            height: 1.5rem;
            font-size: .6rem;
            border: none;
            border-radius: 0.8rem;
            background-color: rgba(255, 0, 0, 0.3);
        }

html 相关代码：

<header class="header-container">
        <div class="navbar">
            <div class="navbar-logo-container">
                <img src="./img/logo.png" alt="">
            </div>
            <div class="navbar-download-container">
                <button type="button" class="navbar-download-btn">下载APP</button>
            </div>
        </div>
    </header>

js 相关代码：

const COEFFICIENT = 18.75;
        const docEl = document.documentElement;
        let viewPortEl = document.querySelector("meta[name='viewport']");
        
        let dpr = window.devicePixelRatio || 1;
        dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
        docEl.setAttribute('data-dpr', dpr);

        let scale = 1 / dpr;
        let content = `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`;
        if (viewPortEl) {
            viewPortEl.setAttribute('content', content);
        } else {
            viewPortEl = document.createElement('meta');
            viewPortEl.setAttribute('name', 'viewport');
            viewPortEl.setAttribute('content', content);
            document.head.appendChild(viewPortEl);
        }
        
        const maxWidth = 540; 
        const minWidth = 320;
        docEl.setAttribute('max-width', maxWidth); 
        docEl.setAttribute('min-width',minWidth);

        const setRemUnit = () => {
            let viewWidth = docEl.clientWidth || docEl.getBoundClientRect().width || window.innerWidth;
​
            if (maxWidth && (viewWidth / dpr > maxWidth)) {
                viewWidth = maxWidth * dpr;
            } else if (minWidth && (viewWidth / dpr < minWidth)) {
                viewWidth = minWidth * dpr;
            }

            docEl.style.fontSize = viewWidth / COEFFICIENT + 'px';
        };
        setRemUnit();
        window.addEventListener('resize', setRemUnit, false);