bodyが絶対、その他を相対

bodyタグを絶対指定で、その他は相対指定でサイズ指定を行うとあとの管理が楽になりそうだな、という話。例えば、全部を絶対指定にすると全体的にサイズを大きくしたいとき大変でしょ。今回の場合だと、bodyだけ変えればいいんで楽なんだなぁって結構今更な話だよね。

以下コード。
<html>
<head>
<title>font size test</title>
<style>
body{
font-size: 12px;
}

#em-1{
font-size:2em;
}
#em-2{
font-size:1.5em;
}
#em-3{
font-size:1em;
}

#percent-1{
font-size:200%;
}
#percent-2{
font-size:150%;
}
#percent-3{
font-size:100%;
}

.inline-box{
float:left;
margin:10px;
}

h2{
clear:left;
}
</style>
</head>

<body>
<h1>body{font-size: <span id="font-size">12px</span>;}</h1>
<div class="inline-box">
<div id="em-1">Hello World! 2em</div>
<div id="em-2">Hello World! 1.5em</div>
<div id="em-3">Hello World! 1em</div>
</div>
<div class="inline-box">
<div id="percent-1">Hello World! 200%</div>
<div id="percent-2">Hello World! 150%</div>
<div id="percent-3">Hello World! 100%</div>
</div>
<h2>Change font size</h2>
<div>
<button id="down">size down</button>
<button id="up">size up</button>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
var sizeChanger = function(n){
var size = $("body").css("font-size");
size = parseInt(size.match(/[0-9]+/)) + n + "px";
$("body").css("font-size", size);
$("#font-size").text(size);
}
$("#down").click(function(e){sizeChanger(-1)});
$("#up").click(function(e){sizeChanger(1)});
</script>
</body>
</html>

サンプル。
sample.html


posted by 右京 | 雑記
blog comments powered by Disqus
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。