Is there any sort of formula that can "accurately" figure a proper EM measurement from a PX measurement?
IE...
If I have a page that is designed with a 700PX width, what would the corresponding EM width be?
Thanx.em is relative to the font size. At the medium font size your page would be one width. at a smaller font size it would be smaller. etc. 3em does not equal 20px. It can equal any number of pixels depending on the font size of the parent element.This will tell you how much 1em is in px.
If you change the text size/zoom and reload the page the new value is given:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>em to px</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
function EMsize() {
alert("1em : "+document.getElementById('em').offsetHeight+" px");
}
onload=EMsize;
//-->
//]]>
</script>
</head>
<body>
<div id="em" style="font-size:1em;">X</div>
</body>
</html>
IE...
If I have a page that is designed with a 700PX width, what would the corresponding EM width be?
Thanx.em is relative to the font size. At the medium font size your page would be one width. at a smaller font size it would be smaller. etc. 3em does not equal 20px. It can equal any number of pixels depending on the font size of the parent element.This will tell you how much 1em is in px.
If you change the text size/zoom and reload the page the new value is given:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>em to px</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//<![CDATA[
<!--
function EMsize() {
alert("1em : "+document.getElementById('em').offsetHeight+" px");
}
onload=EMsize;
//-->
//]]>
</script>
</head>
<body>
<div id="em" style="font-size:1em;">X</div>
</body>
</html>