<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>小强ORG &#187; font-size</title>
	<atom:link href="http://www.xiaoqiang.org/tag/font-size/feed" rel="self" type="application/rss+xml" />
	<link>http://www.xiaoqiang.org</link>
	<description>关注web前端开发&#124;web性能&#124;NodeJs&#124;用户体验&#124;交互设计</description>
	<lastBuildDate>Mon, 30 Jan 2012 09:25:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>弹性布局小结-单位初始化</title>
		<link>http://www.xiaoqiang.org/css/em_layout_reset.html</link>
		<comments>http://www.xiaoqiang.org/css/em_layout_reset.html#comments</comments>
		<pubDate>Tue, 27 Jul 2010 04:52:21 +0000</pubDate>
		<dc:creator>小强</dc:creator>
				<category><![CDATA[Css]]></category>
		<category><![CDATA[em]]></category>
		<category><![CDATA[font-size]]></category>
		<category><![CDATA[弹性布局]]></category>

		<guid isPermaLink="false">http://www.xiaoqiang.org/?p=46</guid>
		<description><![CDATA[自从写了这个皮肤之后，总结一下关于弹性布局的一些注意事项。由于小弟是新手，而且很久没练习页面了，很多地方只是总结一下基础知识，希望大虾们不吝赐教。 由于弹性布局使用想对单位em或者%，都是比较难计算的，因为想对单位都比较难计算。所以这里使用单位初始化，主要是针对em的。 根据漫谈font-size一文学习到了，基于windows的浏览器大部分默认的字体大小是medium，即 16ppem下显示为16px。根据前辈提供的转换表，在样式里加了body { font-size:62.5%}，这样有两个好处： 1em=10px计算宽度高度更加方便（针对body子元素，孙子元素另算，以这个为基础） font-size：1.2em计算字体大小更加方便，不用根据16px计算。不过设置字体大小后子元素的字体大小会继承父元素的，计算起来也挺麻烦的。 针对body { font-size:62.5%}还是body { font-size:63%}的问题我也纠结了一会。测试IE下body { font-size:62.5%}都会比正常像素值少，而使用body { font-size:63%}又会比正常像素值多。FF下body { font-size:62.5%}完美表现，body { font-size:63%}略大。详细测试结果如下图，上面是使用em为单位的div，下面是使用px为单位的div： 测试代码： body { font:63%/2em Microsoft YaHei, Arial, Tahoma, Helvetica, SimSun, san-serif; height:100%; position:relative; text-align:center; background:#A5CEEF; } .divEm{ width:10em; height:10em; border:2em solid #000; background-color:#999; font-size:1em;} .divPx{ width:100px; &#8230; <a href="http://www.xiaoqiang.org/css/em_layout_reset.html">更多内容 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>自从写了这个皮肤之后，总结一下关于弹性布局的一些注意事项。由于小弟是新手，而且很久没练习页面了，很多地方只是总结一下基础知识，希望大虾们不吝赐教。</p>
<p>由于弹性布局使用想对单位em或者%，都是比较难计算的，因为想对单位都比较难计算。所以这里使用单位初始化，主要是针对em的。</p>
<div id="attachment_68" class="wp-caption aligncenter" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/Image_1_png_thumb.jpg"><img class="size-thumbnail wp-image-68 " title="Image_1_png_thumb" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/Image_1_png_thumb-150x150.jpg" alt="相对值对照表" width="150" height="150" /></a><p class="wp-caption-text">相对值对照表</p></div>
<p>根据<a title="漫谈font-size" href="http://www.swordair.com/blog/2010/07/398" target="_blank">漫谈font-size</a>一文学习到了，基于windows的浏览器大部分默认的字体大小是medium，即 16ppem下显示为16px。根据前辈提供的转换表，在样式里加了body { font-size:62.5%}，这样有两个好处：</p>
<ol>
<li>1em=10px计算宽度高度更加方便（针对body子元素，孙子元素另算，以这个为基础）</li>
<li>font-size：1.2em计算字体大小更加方便，不用根据16px计算。不过设置字体大小后子元素的字体大小会继承父元素的，计算起来也挺麻烦的。</li>
</ol>
<p><span id="more-46"></span><br />
针对body { font-size:62.5%}还是body { font-size:63%}的问题我也纠结了一会。测试IE下body { font-size:62.5%}都会比正常像素值少，而使用body { font-size:63%}又会比正常像素值多。FF下body { font-size:62.5%}完美表现，body { font-size:63%}略大。详细测试结果如下图，上面是使用em为单位的div，下面是使用px为单位的div：</p>
<p>测试代码：</p>
<pre class="brush:css">body {
	font:63%/2em Microsoft YaHei, Arial, Tahoma, Helvetica, SimSun, san-serif;
	height:100%;
	position:relative;
	text-align:center;
	background:#A5CEEF;
}
.divEm{ width:10em; height:10em; border:2em solid #000; background-color:#999; font-size:1em;}
.divPx{ width:100px; height:100px; border:20px solid #000; background-color:#999; font-size:1em;}
&lt;div class="divEm"&gt;dieEm测试&lt;/div&gt;
&lt;div class="divPx"&gt;diePx测试&lt;/div&gt;</pre>
<div id="attachment_75" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/IE6_625.jpg"><img class="size-thumbnail wp-image-75 " title="IE6_625" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/IE6_625-150x150.jpg" alt="IE6下font-size:62.5%" width="150" height="150" /></a><p class="wp-caption-text">IE6下font-size:62.5%</p></div>
<div id="attachment_48" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie7_625.jpg"><img class="size-thumbnail wp-image-48 " title="ie7_625" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie7_625-150x150.jpg" alt="IE7下font-size:62.5%" width="150" height="150" /></a><p class="wp-caption-text">IE7下font-size:62.5%</p></div>
<div id="attachment_49" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie8_625.jpg"><img class="size-thumbnail wp-image-49 " title="ie8_625" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie8_625-150x150.jpg" alt="IE8下font-size:62.5%" width="150" height="150" /></a><p class="wp-caption-text">IE8下font-size:62.5%</p></div>
<div id="attachment_63" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/IE6_63.jpg"><img class="size-thumbnail wp-image-63 " title="IE6_63" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/IE6_63-150x150.jpg" alt="IE6下font-size：63%" width="150" height="150" /></a><p class="wp-caption-text">IE6下font-size：63%</p></div>
<div id="attachment_64" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie7_63.jpg"><img class="size-thumbnail wp-image-64 " title="ie7_63" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie7_63-150x150.jpg" alt="IE7下font-size：63%" width="150" height="150" /></a><p class="wp-caption-text">IE7下font-size：63%</p></div>
<div id="attachment_65" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie8_63.jpg"><img class="size-thumbnail wp-image-65 " title="ie8_63" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/ie8_63-150x150.jpg" alt="IE8下font-size：63%" width="150" height="150" /></a><p class="wp-caption-text">IE8下font-size：63%</p></div>
<div id="attachment_72" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/FF_6251.jpg"><img class="size-thumbnail wp-image-72 " title="FF_625" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/FF_6251-150x150.jpg" alt="FF下font-size:62.5%" width="150" height="150" /></a><p class="wp-caption-text">FF下font-size:62.5%</p></div>
<div id="attachment_73" class="wp-caption alignleft" style="width: 160px"><a class="lightbox" href="http://www.xiaoqiang.org/wp-content/uploads/2010/07/FF_63.jpg"><img class="size-thumbnail wp-image-73 " title="FF_63" src="http://www.xiaoqiang.org/wp-content/uploads/2010/07/FF_63-150x150.jpg" alt="FF下font-size:63%" width="150" height="150" /></a><p class="wp-caption-text">FF下font-size:63%</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.xiaoqiang.org/css/em_layout_reset.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

