rem 字体设置错误。根字体10px,p元素设置为2rem之后，字体特别大！

Question

1. 我根字体设置　html{font-size:10px},页面中其他元素都正常，只有.word元素字体设置为2rem，讲道理字体大小为20px，可是真实渲染出来为４１px，请问是哪里的问题。
   （页面其他元素设置rem值都正常，其他我设置１rem渲染出来就是10px）

2. 代码

    <div class="container" id='container'>
        <div class="head-img"><img src='./themeimg.png'/></div>
        <div class="activity">
            <div class="content1">
            <!-- <img src="./activity1.png" alt="activity IMG"> -->
                <p class="intro">活动期间，ＸＸＸ用户在1768游戏内首次单笔充值满30元即可立减3元。
                </p>
                <div class="btn">立即参与</div>
            </div>
            <div class="content2">
                <p class="intro">活动期间，ＸＸＸ用户使用欢乐值单笔成功兑换满100零钱即可获得188元大礼包</p>
                <p class="gift" id='giftTag'>查看礼包>></p>
                <div class="btn">立即兑换</div>
            </div>
            <div class="rule">
                <p class="act-title"></p>
                <p class="word">1、首单立减活动每个用户活动期间内仅可参与一次，不可与其他优惠同享；</p>
                <p class="word">2、活动期间，188元游戏大礼包将在用户成功兑换零钱后即时发放到用户的ＸＸＸ账户中，
                可在【个人中心－我的钱包－我的卡券】中查看，请注意查收，如遇奖励未到账情况请及时
                联系ＸＸＸ客服；</p>
                <p class="word">3、针对恶意刷取欢乐值及活动奖励的用户，ＸＸＸ依法保留对其追究法律责任的权利；</p>
                <p class="word">4 、在法律允许的范围内ＸＸＸ保留对本活动的最终解释权。</p>
                <p class="end"></p>
            </div>
        </div>
            <div class="fixed" id='fixed'>
                <img src="fixedpng.png" alt="popIMG" id='popimg'>
                <div id="cancel"></div>        
            </div>
            <div class="cover" id='cover'></div>        
    </div>

---

css

<style>
    *,div,p,span,a{
        margin: 0;
        padding: 0;
    }
    html{
        font-size: 10px;
        height: 100%;
        background: #fb5e07;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        z-index: 1;
    }
    .head-img img{
        width: 100%;
        z-index: 2;
    }
    .container{
        position: relative;
    }
    .activity{
        z-index: 2;
        padding:2.5rem ;
    }
    .content1,.content2{
            background: url('./activity1.png') no-repeat; 
            height:40rem;
            background-size: auto 100%;
            background-position: center;
            margin-bottom:4.2rem;
    }

    
    .intro{
        /*text-align: center;*/
        font-size: 3rem;
        padding: 12rem 4rem 3rem 4rem;
        margin:0 10%;
        color: #6a3906;
    }
    .btn{
        color:#640b01;
        font-size: 3.3rem;
        text-align: center; 
        width:30rem;
        margin:0 auto;
        line-height:7rem;
        text-align: center;
        padding:2.5rem ;
        background:  #fb5e07;
        border-radius: 10px;
    }
    .btn:hover{
        background:  url('./button.png') no-repeat;
        background-size: 100% 100%; 
    }

    .content2{
        background: url('./activity2.png') no-repeat; 
        height:48rem;
            background-size: auto 100%;
            background-position: center;
    }
    .content2 .intro{
        padding: 12rem 4rem 1rem 4rem;
    }

    .gift{
        text-align: center;
        padding:1rem 0 4rem 0;
        color:#eb1820;
        font-size:45px;
        /* line-height: 2.2rem; */
    }
    .act-title{
        /* 字体大小？ */
        color: #000;
        background: url('./rule.png') no-repeat;
        padding: 2.5rem 0;
        background-size: cover;
        margin-top: 8rem;
    }
    .word{
        padding: 0 7rem;
        font-size: 2rem;
        color: #fbf7ef;
        line-height: 2.6rem;
    }
    .rule>p:nth-child(2){
        margin-top: 2.5rem;
    }
    .end{
        width: 100%;
        height: 5rem;
        background: url('./rule-end.png') no-repeat;
        background-size: cover;
        margin-bottom: 10rem;
    }
    .fixed{
            position: fixed;
            top: 10rem;
            text-align: center;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 13;
    }
    #cancel{
        width: 25rem;
            height: 25rem;
            position: relative;
            top: -120rem;
            right: -66rem;
            z-index: 20;
            display: block;
    }
    .cover{
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 10;
        top:0;
            left:0;
            display: none;
    }

    #popimg{
        position: relative;
            height: 80%;
            width: 80%;
    }

Answer 1

因为有个dpr的问题，建议楼主谷歌一下dpr值。不同设备dpr不一样

Answer 2

同一页面中其他元素正常，比如.intro

Answer 3

这个应该是优先级问题

Answer 4

https://github.com/amfe/artic...