互联网发展飞快,转眼间CSS也需要Framework来保证页面在各种浏览器上表现一致,支持缩放了, 连px像数点都不是定义布局时的最佳单位了。
在YUI CSS 与Buleprint之间,貌似Blueprint的宽度总是比较固定,如950px,所以基本CSS框架选了YUI CSS.
3. In SpringSide3
SpringSide3将YUI CSS2.8 r4的四个文件全压在了yui.css中,分别是:
- reset.css:消除各种浏览器之间对HTML元素样式表现的差异,从而提供一致的样式
- base.css:使用Reset消除了浏览器默认样式,使用Base就可以使HTML元素在A级浏览器中获得一致的表现
- font.css:提供跨浏览器的字体样式和控制。默认大小是13px,其他px的百分比见图表
- grid.css:提供布局。
SpringSide3中的布局很简单, id="doc3"声明了一个100%的页面, class="yui-t2"声明了bd div左边栏180宽。id="yui-main"声明了这是主栏。id="hd,bd,ft"的意义也很明显,其他剩下的就是有时多得有点让人烦的yui-b了。
<body>
<div id="doc3" class="yui-t2"> <div id="hd"><!--header--></div>
<div id="bd">
<div class="yui-b"><!--leftbar--></div>
<div id="yui-main">
<div class="yui-b">
<p>各式主流的、实用的、好玩的开源项目大派对。</p>
</div>
</div>
</div>
<div id="ft"><!--footer--></div></div>
</body>
在showcase的jmx-client.jsp中,更近一步demo了使用yui-g/yui-u进行内容排版,将两种JMX操作的Form等宽并列。
4. CSS进阶长
为了更好的支持缩放,现在不流行用px作为长度单位了,改用em. 常用的换算关系如下,其他可以查 http://pxtoem.com/
px | em |
---|---|
5 | 0.313 |
8 | 0.5 |
10 | 0.625 |
13 | 0.813 |
16 | 1 |
另外,可能是为了批量的修改字体,也会只定义一个标准body字体的大小,然后其他h1,h2等全部用百分比来表示大小。
YUI里默认大小是13px,常用换算关系如下,其他px的百分比见图表
px | % |
---|---|
10 | 77 |
13 | 100% |
20 | 153.9% |