📝 代码查看
使用runcode.html页面

2
查看次数
2025-10-30
创建时间
2025-10-30
最后更新
 <noscript>开启JavaScript，获得更好的体验</noscript>

    <div class="p1">
        宽度为屏幕宽度的50%，字体大小1.2em
        <div class="s1">
            字体大小1.2.em
        </div>
    </div>

    <div class="p2">
        宽度为屏幕宽度的40%，字体大小默认
        <div class="s2">
            字体大小1.2em
        </div>
    </div>
  html {
            font-size: 32px; /* 320/10 */
        }
        body {
            font-size: 16px; /* 修正字体大小 */
            /* 防止页面过宽 */
            margin: auto;
            padding: 0;
            width: 10rem;
            /* 防止页面过宽 */
            outline: 1px dashed green;
        }

        /* js被禁止的回退方案 & 字体缩放方案 */
        @media screen and (min-width: 320px) {
            html {font-size: 32px}
            body {font-size: 16px;}
        }
        @media screen and (min-width: 481px) and (max-width:640px) {
            html {font-size: 48px}
            body {font-size: 18px;}
        }
        @media screen and (min-width: 641px) {
            html {font-size: 64px}
            body {font-size: 20px;}
        }

        noscript {
            display: block;
            border: 1px solid #d6e9c6;
            padding: 3px 5px;
            background: #dff0d8;
            color: #3c763d;
        }
        /* js被禁止的回退方案 & 字体缩放方案 */

        .p1, .p2 {
            border: 1px solid red;
            margin: 10px 0;
        }

        .p1 {
            width: 5rem;
            height: 5rem;

            font-size: 1.2em; /* 字体使用em */
        }

        .s1 {
            font-size: 1.2em; /* 字体使用em */
        }

        .p2 {
            width: 4rem;
            height: 4rem;
        }
        .s2 {
            font-size: 1.2em /* 字体使用em */
        }
var documentElement = document.documentElement;

        function callback() {
            var clientWidth = documentElement.clientWidth;
            // 屏幕宽度大于780，不在放大
            clientWidth = clientWidth < 780 ? clientWidth : 780;
            documentElement.style.fontSize = clientWidth / 10 + 'px';
        }

        document.addEventListener('DOMContentLoaded', callback);
        window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

👁️ 实时预览