<!DOCTYPE html>
<html>
<head>
<title>Em Zooming</title>
<meta charset="utf-8" />
<style>
body{
font-size:32px;
}
#box-1{
font-size:1em;
padding: 0.5em;
margin: 1em;
border:0.2em solid red;
background-color:orange;
}
#box-2{
font-size:2em;
padding: 1em;
margin: 0.5em;
background-color:orange;
border-radius:1em;
}
</style>
</head>
<body>
<div>
<div id="box-1">
Box 1
</div>
<div id="box-2">
Box 2
</div>
</div>
</body>
</html>
<script>
var stdRes=640;
var stdFSize=32;
var relRes=0;
var relFSize=stdFSize;
var winRes=0;
function getWinRes(){
return window.innerWidth || document.documentElement.offsetWidth;
}
function emZoom(){
var body=document.body;
winRes=getWinRes();
relRes=(winRes*stdFSize)/stdRes;
body.style.fontSize=relRes+"px";
}
emZoom();
window.onresize=function(){
emZoom();
}
</script>
Comentarios sobre la versión: Versión 1 (1)