Same CSS producing different font sizes on different pages

问题

I am trying to create CSS for a small-screen view of my web application, and I'm running into maddening font-size issues. Here's the scenario.

I have a class, lets call it .noListItemsWords.

.noListItemsWords {
   font-size: 80%;
}

The only parent anywhere up the DOM from this on both pages that sets the font-size is body, which has a font-size of 24pt.

On page one, the browser is rendering this element with a font-size of 47.7681px:

On page two, the browser is only rendering this at font-size of 32px:

Why does this happen? Is there any way to deal with it?

EDIT: Showing that using a base percentage on my body tag and rem units for my font does not fix the issue:

Tested in Google Chrome 57

回答1:

Well I don't really understand the reason why this fixes it, but adding a meta tag for the viewport made the font behavior go back to expected:

<meta name="viewport" content="width=device-width, initial-scale=1">

回答2:

You should set the font-size as a percentage in your body CSS. Then use rem to set the size of individual strings of text.

rem will scale the font in proportion to the percentage that you put in your base body class.

body {
    font-size: 100%;
}

.noListItemsWord {
    font-size: 0.8rem;
}

来源：https://stackoverflow.com/questions/43545565/same-css-producing-different-font-sizes-on-different-pages