Почему использование процента для установки размера шрифта по умолчанию на мобильных устройствах вызывает проблемы

Question

@media screen and (max-width:500px){ 
    html{font-size:6px;} 
    #chart h4{font-size:1.3rem;} 
    #icon{right:4.2rem;top:17rem;} 
    #drag{top:2.6rem;} 
    #footer .footer_wrapper{max-width:114rem;margin:0 2%;padding:3rem 0;} 
    #footer .copyright{width:20rem;text-align:center;} 
} 

Я изучаю, как создавать недавно созданные веб-страницы, и я просто обнаружил, что когда я использую проценты для установки размера шрифта по умолчанию для корня элемент, возникают проблемы. Посмотрите на код выше, я установил размер корневого элемента размером 6px, который работает отлично, но если я установил его на процент, равный 40%, «rem» будет работать очень странно на мобильных устройствах , У кого-нибудь есть идеи об этом, пожалуйста?

Answer 1

Модуль rem относится к корню или элементу html. Таким образом, определение базового размера шрифта должно происходить в элементе html.

Определение размера шрифта на теле будет работать, но все дочерние элементы, которые имеют определение размера шрифта с использованием единиц rem, возвращаются к элементу root/html для вычисления их абсолютного размера.

так

html { 
     font-size: 10px; 
    } 

    body { 
     font-size: 15px; 
    } 

    .parent { 
     /* font-size will be 15px here */ 
    } 

    .parent .child { 
     font-size: 1.2rem; /* resolved to 12px */ 
    } 

Приглашение от here