首页 > 网页教程 > CSS > CSS之固定布局、流动布局、弹性布局优缺点分析(下)

CSS之固定布局、流动布局、弹性布局优缺点分析(下)

时间:2010-07-16    作者:不详   来源:YAML中文社区

上篇:CSS之固定布局、流动布局、弹性布局优缺点分析(上)

五、使用流动宽度页面设计

虽然流动布局表现出一些问题,但是可以使用一些技巧克服它们。

使用简单的设计

流动站点设计越少依赖图片和困难的技术,就越容易被注册送体验金和维护。它将能够兼容各种分辨率。使用更为简洁的代码和设计,可以更好的防止、发现和解决兼容性问题。

例如Smashing Magazine使用了流动页面布局,为了更简单,只让顶部的黑橘色导航可以延伸,自适应用户的分辨率。另外内容区域按照需要延伸和收缩,智能地使用CSS防止sidebar和内容产生冲突。

Min-width和Max-width

为了让流动布局在屏幕分辨率很大或者很小时有固定宽度,可以使用min-width和max-width,让页面具有可用性。在小分辨率下,页面可能可能固定宽度布局一样产生水平滚动条。W3School对min-width和max-width的详细定义:

IE 6无法支持min-width和max-width。可以使用CSS表达式解决。

六、弹性设计

这是web页面设计的第三种选择,因为能和其他两种主要布局类型(固定宽度和流动)结合使用,弹性设计受到设计师的欢迎。弹性布局使用em作为单位。下面的引用阐述了什么是em和为什么用它有益。

“1px是电脑显示屏上一个无法度量的一个点,而1em是和元素本身的字体一致。em是相对单位,随用户字体大小变化而改变。”

-Patrick Griffiths, A List Apart

虽然弹性设计是为了提供更多好处,但它也像上面两种布局类型有两面性。

1.优点

  • 应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
  • 对于同时喜欢流动和定宽布局的设计师来说,弹性布局是完美的,因为前两种布局的优点在弹性布局中都能找到。

2.缺点

  • 正是因为第一个优点,这种布局会产生一个巨大的可用性问题。需要花更多时间理解和测试,让布局适合所有用户。
  • 这种布局类型相对于其他两个更难注册送体验金,它能带来的一点儿可用性提升看起来并不值得。
  • 根据布局的具体情况,一些弹性设计需要专门为IE6追加一些样式。

弹性页面设计例子

弹性布局和流动布局在表现上十分相似,经常让人困惑。不过弹性设计使用em而不是百分比作为单位,只要依赖于字体大小。这些设计自适应用户浏览器文本大小。

相关推荐
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
CSS网页布局有关中文排版的九个技巧
相对定位中奇数的宽和高导致IE6布局BUG
CSS的Z-index属性深度解剖
揭开CSS定位属性Position的神秘面纱
如何用CSS实现多个子框架居中?
CSS3盒子模型(Flexible Box Module)之位置排序应用详解
CSS3盒子模型(Flexible Box Module)之尺寸应用详解
CSS之固定布局、流动布局、弹性布局优缺点分析(上)
CSS布局常见的十个BUG
10种导致CSS布局页面错乱的解决方法分享
CSS新手教程:学习CSS页面布局和加载流程
CSS创建复杂布局的利器—Flexible Box Model
CSS与响应性设计的未来及改进设想
CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
CSS水平居中/垂直居中的N个方法 前端开发必收藏
什么是响应式网页设计?响应式布局的实现原理
前端开发框架Bootstrap3.0新手入门学习系列教程
前端开发框架Bootstrap3.0学习教程之入门篇

精彩推荐

热门教程

博聚网