固定布局与流式布局
来源:互联网 发布:淘宝售后电脑如何操作 编辑:程序博客网 时间:2024/05/01 00:33
固定式网页布局
固定布局(Fixed Layout)使用固定宽度的包裹层(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包裹层(或称为容器)的宽度是固定不变的, 所以不论访问者的浏览器是什么分辨率, 他们看到的网页宽度都彼此相同.
图一: 固定宽度的网页布局
上图显示了一个典型的固定网页布局, 外层宽度为960像素, 内部分别为520, 200和200像素的宽度. 实际上, 960像素已经成为了行业标准, 因为主流用户的屏幕分辨率往往是1024×768或者更高.
流式网页布局
流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比来设置各个部分的宽度, 用来适应不同的分辨率. 有时候, 对于网页中的某一部分元素(比如边界值, 侧边栏), 可以使用固定宽度, 但大部分元素是使用百分比来控制的.
图二: 流式或称液态网页布局
小结
在设计网页布局的时候, 设计者应考虑到以下情况:
- 屏幕分辨率
- 用户使用的浏览器
- 浏览器是否最大化了
- 浏览器的侧栏是否打开
- 甚至是用户的操作系统和硬件配置
当然, 设计的主要原则是可用性(usability).
本文大部分翻译自smashingmagazine, 原文讨论了各种网页布局的优缺点, 配有丰富的实例, 点击这里前往观看.
- 固定布局与流式布局
- flex与布局(基本网格布局、百分比布局、一侧固定一侧自适应、圣杯布局)
- 布局 固定大小的布局
- 快速将固定宽度布局转换成响应式布局
- 静态布局、自适应布局、流式布局与响应式布局的区别
- HTML5 布局-固定宽度
- PC端固定布局
- CSS固定宽度布局
- 固定列表布局
- 固定表格布局
- 网页布局之---固定布局、流动布局、弹性布局
- AutoFlowLayout:多功能流式布局与网格布局控件
- FlowLayout流式布局管理器与网格布局GridLayout
- CSS中的固定布局和相对布局
- 固定宽度与变宽度页面布局分析
- 【ExtJs】折叠式布局与卡片式布局
- 固定宽度CSS版式布局
- 上下固定,中部滚动布局
- PPRevealSideViewController第三库的简单例子
- CSS选择器的权重与优先规则
- 隐性语义索引(LSI)学习笔记
- oracle中日期,数字,字符串之间的相互转换
- SkinMagic使用的基本方法及高级方法
- 固定布局与流式布局
- java中通过request获取客户端IP地址
- Android x86模拟器Intel Atom x86 System Image配置与使用方法
- 什么是编写教学设计流程图
- Servlet请求转发:RequestDispatcher接口
- 读取和设置php.ini中的配置选项
- 面试时,如何向公司提问?
- oracle中的视图和内联视图
- 一个不错的极客