网站用户体验整合设计-体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞

体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞

Post by 张美工, 2008-10-20, Views:

　　在前面的几个文章中我们了解了固定宽度布局、流体布局自己的特点，优缺以有解决方案，那么对于人类的规律是推陈出新，那前面发现了问题后面一定会有一个解记问题并且又更优化的布局方法出现，它就是目前为止比较好的布局方式，当然以后会有更加优化的方法，以后再讨论研究。

　虽然流体布局可以充公利用可用空间，但是在大分辨率显示器上仍然会过长，让用户不舒服。相反，在窄窗口

中或者在增加文本字号时，行会变得非常短，内容很零碎。对于这个问题，弹性布局可能是一种解决方案。
　弹性布局相对于字号（而不是浏览器宽度）来设置元素的宽度。通过以em为单位设置宽度，可以确保在字号增

加时整个布局随之扩大。这可以将行长保持在可阅读的范围，对于视力弱或有认知障碍的在尤其有用。
　

与其他布局技术一样，弹性布局也有自己的问题。弹性布局的一些问题与固定宽度布局相同，比如不能充分利

用可用空间。另外，因为在文本字号增加时整个布局会加大，所以弹性布局会变得比浏览器窗口宽，导致水平滚

动条出现。为了防止这种情况，可能需要在主体标签上添加100%的max-width。IE6和更低版本当前不支持max-

width，但是Safari和Firefox等待符合标准的浏览器支持它。
　

　　创建弹性布局比创建流体布局容易得多，因为所有的HTML元素基本上一直出现在相同的相对位置上，它们仅仅

是同时随着文本字号而增大。将固定宽度布局转换为弹性布局非常简单的任务。技巧是要设置基字号，让1em大致

相当于10像素。

　　大多数浏览器上的默认字号是16像素，所以可以将所有像素宽度转换为em宽度，从而将固定宽度布局转换为弹

性布局：
   #wrapper {
     width:72em;
     margin:0 auto;
     text-align:left;
   }
   #mainNav {
     width:18em;
     float:left;
   }
   #content {
     width:52em;
     float:right;
   }
   #mainContent {
     width:32em;
     float:left;
   }
   #secondaryContent {
     width:18em;
     float:right;
   }
   　在使用常规文本字号时，这些代码产生的布局与固定宽度布局看起来一样，但是它会随着文本字号的增加而漂

亮地增大。

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总

# 体验css+div 之　CSS hack:区分IE6，IE7，firefox

# 体验css+div 之兼容标准XHTML的浮动层特效实现

# 因为编码差异导致IE6不能正常解析CSS文件

# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

#  体验css+div 之为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

# 体验css+div 之圆角框

# 体验css+div 之层叠和特殊性
# css之自动换行

# CSS控制连续英文字母或数字强制换行

# 让css使网页图片半透明

# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮

# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div之图像替换 1.徽标图像替换
# 体验css+div 之使用自动空白边让设计居中

+

Tags: 体验cssdiv 弹性布局

分类:css+div | 评论:0 | 引用:0

上一篇：体验css+div之图像替换 1.徽标图像替换
下一篇：体验css+div 之解决流体布局的问题

或许你还对下面的文章感兴趣

Comments

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest