非你网

移动端按设计稿原因输出。

先设置 head 的 viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

动态初始化

这里设计稿宽度 750px，100px 对比 1 rem 进行换算。

    <script>
        (function() {
            const designWidth = 750; // 设计稿宽度
            const baseRem = 100; // 设计稿中 100px = 1rem

            function setRootFontSize() {
                const deviceWidth = document.documentElement.clientWidth || window.innerWidth;
                // 限制最大宽度（可选，防止在 iPad/PC 上过大）
                const maxWidth = 750;
                const effectiveWidth = Math.min(deviceWidth, maxWidth);
                const fontSize = (effectiveWidth / designWidth) * baseRem;
                document.documentElement.style.fontSize = fontSize + 'px';
            }

            setRootFontSize();
            window.addEventListener('resize', setRootFontSize);
            window.addEventListener('orientationchange', setRootFontSize);
        })();
    </script>

写样式

样式中使用 rem 代替设计稿中的 px。1rem 对比 100px 的换算。