What is the relationship between ems and pixels?

2019-03-30 13:43发布

问题:

What is the value of an em in terms of pixels?

10em = ?px ?

回答1:

There's no specific relationship between em and px. It's computed based on the width of the "m" character for each font-face.



回答2:

While as others have said, there is no set ratio - as it varies from font to font - it is possible to calculate this for a particular font face/size combination by using DHTML.

Simply create a div with

style="width: 1em; visibility:hidden"

and append it to the place in the document you are interested about.

You can then find out its width by checking the div's clientWidth property



回答3:

It depends on the font and the platform you're rendering on. There is no universal ratio.



回答4:

It's about 160px, if 1em is 16px and 10em = 1000%. It's just an approximation, which will depend on font, browser and OS.



回答5:

If you are using a standard sized text font of 11 or 12px then a general rule of thumb is 1em is going to be about that big in pixels, so 11 or 12 pixels.



回答6:

By default 1em is 16px (font-size:100%;), so 16px x 10em = 160px

You can change the size of an em by changing the percent of the font-size in the body, for example if you want to change the size of an em to 10px, this would be your CSS:

body {
font-size:62.5%;
}

16px x 62.5% = 10px



标签: html css em