页面布局的梳理
先前只知道 CSS 的布局有两列, 三列 , 等宽, 等高等, 还是在看新浪网的时候才开始对布局有了一些意识, 但并没对其进行一些归纳, 每当准备模仿网站或者还原设计图时首先便会先观察其整体的结构, 再对其进行分析, 找出相同的部分, 在大脑中大致会有个思路, 一步步该如何划分, coding , 喜欢逛张鑫旭大神的博客, 他上面有很多特别有营养的东西可供吸收, 也是在他那里看到流式布局, 随机查了些资料, 才对布局又重新进行了一些梳理. 纯为个人笔记, 有需要的可以参考一下, 更详细的网上资料很多, 亲们可以多翻阅查找,精通 CSS上关于布局的一章, 个人认为分析的还是很不错的, 很多都值得我们去思考.
网页布局有固定宽度, 流体式, 弹性布局; 比较常用的就是固定宽度的布局, 原因很简单, 因为简单粗暴上手简单. 流体式及弹性布局比较多的使用在论坛网站, 或者个人博客中. 在移动端发展迅速的限制弹性布局也开始应用广泛, rem 的引入也修正并提升了 em 的使用. 固定式布局主要是使用像素的模式, 在使用流体式布局时, 尺寸是使用百分数而不是像素设置的, 这使得流体式布局相对于浏览器窗口进行伸缩, 随着窗口变大, 列宽也会变宽. 反之, 随着窗口变小, 列的宽度也变小. 流体式布局可以非常高效的使用空间. 但是, 流体式布局必然也有其问题, 在窗口宽度较小的时候, 行变的非常窄, 很阅读 . 因此, 有必要添加以像素或 em 为单位的 min-width, 从而防止布局变得太窄. 但是, 如果 min-width 设置的太大也会遇到与固定宽度布局相同的限制. 在 CSS3 中引入的新特性里, 有媒询一说通过操作 media, 用来完成响应式布局. 所谓响应式也就是让一个网站能够兼容多个终端, 弹性布局相对于字号 (而不是浏览器的宽度) 来设置元素的宽度, 以 em 为单位设置宽度. 可以确保在字号增加时整个布局随之扩大. 这样就可以将行保持在可阅读的范围. 当然啦, 于其他布局一样, 弹性布局也有一些问题与固定宽度布局相同, 不能充分利用可用空间. 另外, 因为在文本字号增加时整个布局会加大, 所以弹性布局会变得比浏览器窗口宽, 导致水平滚动条出现. 为了, 防止这种情况, 可能需要在容器 div 上加上 max-width 为 100%,ie6 不支持 max-width, 如果确实要兼容 IE6, 就必须使用 javascript;
详细还可参考[弹性布局](http://www.blueidea.com/tech/web/2009/6692.asp)
评论
2
喜欢
0
赞
1
评论 ( 2 )
走你
最新评论
来源: http://www.qdfuns.com/article/17878/325443e7fd790671a338c72c2eb62a96.html