日期:2014-01-19 浏览次数:20940 次
流动网页设计有很多好处,但也只要在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈现。但是,蹩脚的代码结构,对于流动规划来说将是灾难性的。因此,我们需求针对大多数流动设计的缺点寻求可行的处理方案。
如果你作为设计师通过额外的付出创造了一个功用性流动规划,为什么不更进一步使其兼容所有分辨率,而不是局限于大多数屏幕。你可以使用一些技巧创造一种意想不到的顺应性规划,这种规划在不断改变屏幕分辨率情况下会保持功用上的完整性。
在这篇文章,我们将讨论创造100%功用自顺应css规划的行之无效的方法
一、使用网格的流动规划
我们大多数人都听说过设计固定宽度网页的 960网格系统 ,使用960网格系统使得固定宽度的设计比流动规划更可取。但是,有一种方法可以创建一个基于网格的弹性规划。从技术上讲,弹性规划的代码结构不同于流动规划,但它为用户提供的几乎是相反的效果。
什么是流动规划?
流动网格是通过智能的使用div、百分比和简单的数学计算来创建的。这种理念来自于Ethan Marcotte ,他认识到“em”比字体大小进步。我们在这重温这个基本概念,但要对该方法有一个全面而详细的了解,请参阅“流动网格”,这是一篇全面的关于建立基于网格的弹性规划的教程。
其理念是使用绝对尺寸、结合百分比和em,用简单的分割以找到绝对应的像素宽度,而这些宽度是在固定宽度设计中使用的。
优点:
这种方法使你拥有一个网格规划,这看起来可能仅固定一次宽度;
用户可以使用预设的字体大小查看这个规划,并且保持其比例大小;
规划款式跨浏览器兼容;
一旦理解之后,流动设计中的大多数问题将容易修复。