固定布局、流动布局、弹性布局哪一种适合你

选择固定布局(fiexd),流动布局(fluid/liquid)还是弹性布局(elastic)?这个问题已经困扰了网页设计师们很多年了。每种布局都有它的优点和缺点。最后的选择往往取决于需求,而不是哪个更简单。考虑到这些因素并恰当的设计,你最终能获得拥有所有优点的成功布局。

本篇文章将讨论每个布局类型的优点和缺点。只要牢记可用性,无论适用哪种布局类型都可以做出成功的站点。

参考我们之前的文章:

Flexible Layouts: Challenge For The Future,未来布局的挑战

Applying Divine Proportion To Your Web Designs,如何在布局中应用”黄金比例”和“三分定律“。

归根结底网页最重要的是可用性,这一点很难平衡,因为站点用户情况可能不同。

当开始一个大众化的站点时,设计者应该考虑到访问者可能的不同点:

屏幕分辨率

浏览器

浏览器是否在最大最小(占屏幕面积)状态

浏览器开启额外工具栏(历史记录,书签等)

操作系统和硬件设备

如果没有标准化站点尺寸,设计师在开始工作的时候会遇到许多问题。

一、 固定和流动布局的不同点

虽然大多数设计者和开发人员认为固定和流动布局的定义很基础,但为了更为清晰,再复习一遍。

固定宽度布局(Fixed Layout)

这种布局有一个设置了固定宽度的外包裹,里面的各个模块也是固定宽度而非百分比。重要的是容器(外包裹)元素是设置为不能移动的。无论访问者屏幕的分辨率是多少,网页都显示为和其它访问者相同的宽度。

上图展示的是一个固定宽度布局的基本轮廓。里面的三列分别是520,200和200px宽度。960px已经成为现代web设计的标准,因为大多数站点用户被假定为使用1024×768分略率。

流动/流体布局(Fluid/Liquid Layout)

流体布局,也被成为流体布局,主体部分都是用了百分比宽度,因此可以自适应用户的分辨率。

时间: 2024-08-03 08:36:56

固定布局、流动布局、弹性布局哪一种适合你的相关文章

固定 vs. 流动 vs. 弹性:哪种布局更适合你?[SM]

有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 本文将讨论每种布局方案的利与弊.其实,只要你时刻注意可用性,每种方案都能实现成功的网站布局.   您也可以参考一下我们以前的文章: Flexible Layouts: Challenge For The

固定、流动、弹性网页布局的利弊分析

有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做出正确决定的诀窍呢?考虑好几个问题,恰当地设定目标结果,你也能做出融合各方优点的成功布局设计. 本文将讨论每种布局方案的利与弊.其实,只要你时刻注意可用性,每种方案都能实现成功的网站布局. 为什么要争论这些?网页设计受可用性的大棒指引,而由于网站用户的多样性,已经很难做出对不同用户都有足够可用性的网

web设计 网页流动布局和弹性布局 转载

本文转载csdn作者qinghuawenkang博客http://blog.csdn.net/qinghuawenkang/article/details/7557087   在现实世界中,防弹衣并不能100%保证您不受伤害,但人们总是在不断地争取提升其防弹性能.毕竟,穿了防弹衣总是比不穿好.         这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不同的特色.这是一个循序渐进的过程,并且当采

web app 自适应方案总结 关键字 弹性布局之rem

现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox        使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 一. 弹性布局         使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示. 因为em是相对父级元素的原因 没有得到推广. 二. 流式布局(Fluid)          使用 % 百分比定义宽度,高度

谈网页的弹性布局与固宽布局设计

这里所说有弹性,指的是背景去自适应屏幕宽度,而固宽呢,则是让正文内容无论在宽屏还是窄屏中都能自动居中.夹缝中求生存,以满足不同大小分辩率用户的需要... 在当今用户的显示器越来越大的今天,之前的1024*768固宽布局有点越来越不合时宜,对大屏幕的用户而言,两侧空空的留白给人第一眼的印象是严重的屏幕浪费,作为网页设计师的你有责任给这一批用户一个良好的用户界面. 当然为了减少这种屏幕的浪费,采用弹性流体布局是最好的解决方案,它可以充分利用屏幕空间,无论你是多大分辩率的用户,都能尽情满屏展示内容.然

从零开始学_JavaScript_系列(17)——CSS<4>(定位、遮罩、float、弹性布局flex)

部分可能不兼容低版本浏览器(比如IE) 部分图片来自网易云课堂,侵.私信.删   (60)定位 ①position   ②值: static:默认,无定位   relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位.会压在其他的元素上面.作用是为绝对定位元素提供参照物.   absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素的前序元素的后面),默认宽度是内容宽度,参照物是第一个定位的祖先/根元素(根元素是html元素),如果祖先没有定位元素,那

什么是响应式布局、响应式布局该如何设计

文章简介:今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局). 讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media

Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

  [Android布局学习系列]   1.Android 布局学习之--Layout(布局)详解一   2.Android 布局学习之--Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之--LinearLayout的layout_weight属性   4.Android 布局学习之--LinearLayout属性baselineAligned的作用及baseline      Layout Parameters(布局参数):            在XML文

iOS文本布局探讨之一——文本布局框架TextKit浅析

iOS文本布局探讨之一--文本布局框架TextKit浅析 一.引言         在iOS开发中,处理文本的视图控件主要有4中,UILabel,UITextField,UITextView和UIWebView.其中UILabel与UITextField相对简单,UITextView是功能完备的文本布局展示类,通过它可以进行复杂的富文本布局,UIWebView主要用来加载网页或者pdf文件,其可以进行HTML,CSS和JS等文件的解析.         TextKit是一个偏上层的开发框架,在i