在HTML中添加字体大小会覆盖我所有的字体大小

Question

I font weird behavior if I added font-size to html

 html {
            font-size: 10px;
        }

it will override all font-sizes I have on all html tags and it will make them smaller

I want to keep the font-size on html but I have one div that I won't it to be effected by html font size

Here an example

https://jsfiddle.net/Ldgworje/1/

try to remove the html from CSS and try

I want to keep the font-size for html but I have one div that I don't want it to be effected by html font size

as you see in the example

I hope you can help

Answer 1

This is happening because you are using rem for the font size. rem and em are supposed to work that way. Check https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

If you do not want rating to be affected use px instead.

Answer 2

What you do is you add a rule after that html font rule, and you create an ID for that div and you set font size to whatever:

html {
    font-size: 10px;
}

div#fontSize {
    font-size: 14px; /*Or whatever size you want*/
}

If you want to leave the font size the same as the default for the div element, then just set it to 1em , as below:

div#fontSize {
    font-size: 1em; /*Sets this size to 16px, which is default*/
}

Simple! Just ask if you need any help/explanations/fiddles.