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

2
查看次数
2025-10-30
创建时间
2025-10-30
最后更新
<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>
 /* 字体缩放方案 */
        @media screen and (min-width: 320px) {
            body {font-size: 1rem;}
        }
        @media screen and (min-width: 481px) and (max-width:640px) {
            body {font-size: 1.1rem;}
        }
        @media screen and (min-width: 641px) {
            body {font-size: 1.2rem;}
        }
        /* 字体缩放方案 */

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

        .p1 {
            width: 50vw;
            height: 50vw;

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

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

        .p2 {
            width: 40vw;
            height: 40vw;
        }
        .s2 {
            font-size: 1.2em /* 字体使用em */
        }
暂无JavaScript代码

👁️ 实时预览