YUI中的css——Grids.css
1,grids.css中页面布局的宽度用的是em宽度,是因为em会随着用户调整字体的大小(查看-文字大小)而改变宽度,从而有更好的用户体验;
2,根据reset.css,页面字体大小为13px,所以页面宽度也要根据13px来设置em,但是,在ie中有点问题,如果在firefox等标准浏览器中字1em为13px的话,在ie中要13.3333px,而且用*过滤器来设置ie中的em宽度。如在body字体大小为13px的情况下设置页面宽度为600px,在ie中为45.00em,而在firefox等标准浏览器中为46.15em。
3,注意(来自http://developer.yahoo.com/yui/grids/)
Here are some other things to keep in mind: 1) The width is set in em
s because em
s scale with user-initiated font-size adjustment, and therefore provide a superior user experience. 2) YUI Fonts does a good job of normalizing the width of an em
, but we're still obliged to provide a slightly different value for IE. 3) Be sure the width
value for IE comes after the value for everybody else. 4) Setting the min-width
is optional, but helps the grid maintain integrity as the viewport shrinks. 5) The text-align
and margin
are used to help center the page, and should not be modified.
模板类 | 预设描述 |
.yui-t1 | 左边160px的边栏 |
.yui-t2 | 左边180px的边栏 |
.yui-t3 | 左边300px的边栏 |
.yui-t4 | 右边180px的边栏 |
.yui-t5 | 右边240px的边栏 |
.yui-t6 | 右边300px的边栏 |
特殊的内部类 | 预设描述 |
.yui-gb | 1/3 - 1/3 - 1/3 |
.yui-gc | 2/3 - 1/3 |
.yui-gd | 1/3 - 2/3 |
.yui-ge | 3/4 - 1/4 |
.yui-gf | 1/4 - 3/4 |