自适应css布局——流动布局新时代[译]
作者：dishuipiaoxiang 来源：蓝色理想 发布时间：2009-08-13 12:28:00
流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、ＰＤＡ小屏幕上都能得到良好的呈现。但是，糟糕的代码结构，对于流动布局来说将是灾难性的。因此，我们需要针对大多数流动设计的缺点寻求可行的解决方案。
如果你作为设计师通过额外的付出创造了一个功能性流动布局，为什么不更进一步使其兼容所有分辨率，而不是局限于大多数屏幕。你可以使用一些技巧创造一种意想不到的适应性布局，这种布局在不断改变屏幕分辨率情况下会保持功能上的完整性。
在这篇文章，我们将讨论创造100％功能自适应css布局的行之有效的方法，并提供其他教程和实践的详细清单：
你也参考以前的文章：
固定&流动&弹性布局：哪一个适合你？
这篇文章讨论每一种布局类型的优点和缺点。其中的任何一个可以用来创造一个成功的网站布局，只要保持其可用性就行；灵活布局：未来的挑战
讨论灵活布局在未来的挑战；屏幕分辨率和更好的用户体验
介绍屏幕分辨率的问题，然后普通用户的个人脚本。
一、使用网格的流动布局
我们大多数人都听说过设计固定宽度网页的 960网格系统 ，使用960网格系统使得固定宽度的设计比流动布局更可取。但是，有一种方法可以创建一个基于网格的弹性布局。从技术上讲，弹性布局的代码结构不同于流动布局，但它为用户提供的几乎是相同的效果。
什么是流动布局？
流动网格是通过智能的使用div、百分比和简单的数学计算来创建的。这种理念来自于Ethan Marcotte ，他认识到“em”比字体大小进步。我们在这重温这个基本概念，但要对该方法有一个全面而详细的了解，请参阅“流动网格”，这是一篇全面的关于建立基于网格的弹性布局的教程。
其理念是使用相对尺寸、结合百分比和em，用简单的分割以找到相对应的像素宽度，而这些宽度是在固定宽度设计中使用的。
优点：
这种方法使你拥有一个网格布局，这看起来可能仅固定一次宽度；
用户可以使用预设的字体大小查看这个布局，并且保持其比例大小；
布局样式跨浏览器兼容；
一旦理解之后，流动设计中的大多数问题将容易修复。
0
投稿猜你喜欢
怎么用javascript进行拖拽本文译自：http://www.webreference.com/programming/javascri- 我在网站上设置了邮件列表功能，实现用户自动订阅和发送，但很多用户输入和提交的邮件地址格式都是无效的，无法处理。请问如何解决这一问题？&nbs
- 导读：由于banner一般用于专题类网站，在门户网站的二级页面，用户进来之前，在首页已经对主题有一定的了解和认识，所以banner的作用是在
- win7 +Navicat Lite 9+ VMware7在VMware中安装openSUSE11.x mysql5 Navicat Lit
- 在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框，无论怎样拖动，等到放下鼠标，表格却又恢复到原
- 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002
- 从98年某月某日我的第一个个人猪页诞生.到2008年的今天.宣告了我从事设计行业整整十年.十年,很多变化,从摆弄个人猪页到现在以做设计为生,
- 提要：系统自带的mysql默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过
- “重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。
- 有些朋友看到这个标题可能会有疑问，难道在视图中使用*符号还有何要注意的地方吗？对于这个问题，我们先不必回答，先看一下例子吧。 我这里，使用的
- 大家是否还记得1983年任天堂的著名游戏《超级玛丽》里那个留着胡子的意大利水管工人，还有日本konami公司1987年发行的射击游戏《魂斗罗
- 对于个人站长来说，如何能使自己的网站与众不同、充满个性，一直是不懈努力的目标。除了尽量提高页面的视觉效
- 1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name2.获取所有表
- 从MySQL 5.0.2开始，通过mysql_stmt_attr_set() C API函数实现了服务器端光标。服务器端光标允许在服务器端生
- 很多互联网应用程序都提供了全文搜索功能，用户可以使用一个词或者词语片断作为查询项目来定位匹配的记录。在后台，这些程序使用在一个SELECT查
- 网站域名一般都会选简短易记的，因为这对于网站宣传来说也可以省不少力。而被很多网站忽视的站内Url结构则在一定程度上反映出网站的整体架构。当设
- 最近，在项目开发过程中，碰到了数据库死锁问题，在解决问题的过程中，笔者对MySQL InnoDB引擎锁机制的理解逐步加深。案例如下：在使用S
- 如果你看过YUI的RAW源码，会发现很多跟javadoc语法类似的注释。据说(via)是使用JSDoc这个工具。但我探索了一遍，发现YUI多
- asp如何获知页面上的图象的实际尺寸大小？见下面的两个asp文件：<!--#include virtual="/i
- 一直以来，Web 字体背着单调的恶名，因为想在网页上显示一种字体，该字体文件本身必须存在于用户的电脑中，由于这个限制，加上 Web 用户可能
