创造100% 自适应css布局的行之有效的方法

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

  创建流动布局的第一步是创建一个首选的固定宽度的模拟,这样一来,设计师能看到其比例,然后使用神圣的比例、平衡和合适的间距技巧。

  

 

  从上述简单的布局中,我们可以看到如何在css中规划代码。960px是我们的固定宽度,对于任何小于该尺寸的分辨率屏幕,我们将迫使水平滚动条出现。所有内容在一个880px的wrapper里,在左右两侧有40 px的margin,元素间有20px的间距。

  在我们思考其可用性之前,一切安好。这种类型的布局可能适合很多用户,但未必适合每一个人。因此,我们将其转换成流动布局,如果欲使这一布局在任何分辨率下保持其比例,我们必须将960px的宽度改为100%,然后计算出与880px、640px、200px等值的百分比。

  这需要一些理性思考,在我们模拟的固定宽度设计中,在960px的设计中,整个wrapper是880px,如果需要与其等价的百分比,我们所要做的是相除。

  800pixels / 960pixels = 0.91667

  采用十进制,将其转换成百分比,得到的是91.6667%。因为当前浏览器处理百分比的差异,它不会很明智的将所有小数位数应用到布局之中,浏览器要么向上取,要么向下舍。因此,我们需要一个整数,既然它更接近于92%,我们就向上取,稍后因为额外间隙的存在,我们需要向下舍,这很容易做到。

  #wrapper {

  width: 92%;

  }

  对于content和sidebar区域,我们如法炮制,但需保持正确的比例。因为这个区域在880px的wrapper内,我们需要找到相对于这个区域的百分比。

  640 pixels ÷ 880 pixels = 0.727272 › 73%

  220 pixels ÷ 880 pixels = 0.25 › 25%

  width: 73%;

  }

  #sidebar {

  width: 25% ;

  6.}

  我们将实际内容区域的宽度降至72%,这样我们的布局就不会破坏。因为它位于导航栏的旁边,我们不希望它太宽。

  

 

  在处理流动设计的比例时,这是一个非常简单的概念,也是更有效的处理方式。借助于这样的技巧,设计者没有理由说不能保持其比例,美观的布局被破坏。

  关于margin

  设计者可以用不同的方法处理margin,一种方法是计算margin的百分比(此例中为200px/880px);另外一种是设置固定的margin,在我们的例子中,硬性大小为20px。

  两种方法各有优劣,margin使用百分比,设计师承担者在大分辨率屏幕下margin太大的风险但能保持完好的比例。用固定的margin在比例的保持上有轻微的缺陷,但是,无论屏幕分辨率为多大,margin将维持不变。
#p#副标题#e#
二、自适应内容

  该流动设计另外一个常见问题是:尽管它们适应很多分辨率的屏幕,但如果分辨率太小(如手机或PDA)或超大,看上去就有点滑稽了。在分辨率为240的PDA屏幕上一个三栏布局看起来非常混乱。

  为了解决这个问题,我们可以使用一项技巧使内容自适应特定范围的分辨率屏幕。幸运的是,我们可以利用上面的技术来保持我们的比例,然后增加该项技术以得到更好的可用性。

  自适应内容流动布局

  大多数流动布局在分辨率为800×600的屏幕中看起来很大很宽--高达1280px。但是,我们可以稍稍突破一下,针对800px-1024px、1024px-1280px、1280px以上的屏幕定制略微不同的布局。同样,也可为640px-800px、320px-640px、240px-320px、240px以下的屏幕自定义调整。

  The Man in Blue曾使用过这样的技巧。

  

 

  

 

  上面的例子有两个单独的样式:一个针对分辨率超过800px的屏幕;一个针对分辨率小于800px的屏幕。

  这种技巧用不同风格的布局取更好的适应不同分辨率的屏幕。Marc Van Den Dobblesteen’s layout example, Switchy McLayout 用这些样式提供了一个完美的例子。

  优点

  设计者可以更精确的看到,在不同分辨率屏幕下,其设计是什么样子;

  无论是在什么平台上查看,其更好的遵守了间距和平衡的设计原则;

  完美的处理了最小和最大分辨率。
#p#副标题#e#
创建自适应内容流动布局

  创建这种类型的布局,我们要做两件事:为每一范围分辨率的屏幕设立单独的样式;第二是确定用户屏幕的分辨率。对此,Kevin Hale 在文章 Dynamic Resolution-Dependent Layout Technique 中作过详细的介绍。

  第一步是创建一系列可替代的布局文件。例如,一个称之为narrow.css,其针对小分辨率的屏幕。另一个可称之为normal.css,适应于传统的分辨率屏幕,第三可称之为wide.css,将处理较大分辨率的屏幕。

  我们可以使用js根据预设的样式表作简单的改动,Dynamic Resolution Dependent Layouts 在演示页中使用js解释了如何使用它,于其它类型布局一样,所有样式和js文件都放在头部。

  

  

  title="narrow"/>

  

  

  

  

  title="wide"/>

  

  

  注意到所有三个链接样式单的title属性:“narrow”、“default”、“wide”,在js源文件中查看DynamicLayout() 函数。可以看到,我们会很容易的根据每个title属性来调用相应的样式,以及如何改变相应的宽度。

  function dynamicLayout(){

  var browserWidth = getBrowserWidth();

  // Narrow CSS rules

  if (browserWidth < 640){

  changeLayout("narrow");

  }

  // Normal (default) CSS rules

  if ((browserWidth >= 640) && (browserWidth <= 960)){

  changeLayout("default");

  }

  // Wide CSS rules

  if (browserWidth > 960){

  changeLayout("wide");

  }

  }

  这种技术很容易实现,能够与其它技术一起创建更多的可用性布局。仔细查看js,可以看到更多细节。

  相似的技术

  对于类似的技术,可以参阅 Brand Spanking New 的 Dynamic layouts with adaptive columns,他使用了大致相同的代码,但略微不同,幸好有更多的选择和脚本实例得到同样的自适应内容。

  

 

  

 

  要下载此版本自适应内容的脚本,请到 Dynamic layouts with adaptive columns。

  这种概念并不难,关于此技术每个开发者都有自己的脚本,Clagnut.com博客的回帖中有更多关于自适应内容的布局和脚本--“Variable fixed width layout“,在其回帖中甚至有一种技巧无需任何脚本--CSS Drop Column Layout
#p#副标题#e#
三、 流动布局中的图像

  在流动布局中开发者最关心的是处理图像和内容,它们需要一定的宽度。大多数情况下,我们希望我们的图像尽可能的大,至少在太小时应防止任何令人尴尬的空白,在固定宽度的布局中,可手动调整,客服这些问题很容易。但是,在流动布局中,图像区域的宽度是不断变化的,这些问题就在此出现了。

  自动杂志版面设计

  这个解决方案需要一些聪明的数学知识和PHP,在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解释(包括数学)和可下载的源代码。标题由图像在杂志中如何呈现来决定:有条理且总是完美对齐。当然,一本杂志版面的设计师都必须经过一定的过程来实现这种效果,包括调整和手动放置。

  对我们来说,这一技巧可以实现我们的效果,下面是脚本实现这一效果的第一个例子。

  

 

  正如你所看到的那样,非常漂亮。但是,如何使用流动布局使其更具可用性?Harvey Kane 给了我们必须使用的脚本。

  # include the class file

  require_once('magazinelayout.class.php');

  # Define the width for the output area (pixels)

  $width = 600;

  # Define padding around each image; this *must* be included

  #in your style sheet (pixels)

  $padding = 3;

  # Define your template for outputting images

  # (Don't forget to escape the &)

  $template = '';

  # create a new instance of the class

  $mag = new magazinelayout($width,$padding,$template);

  # Add the images in any order

  $mag->addImage( 'landscape1.jpg' );

  $mag->addImage( 'portrait1.jpg' );

  $mag->addImage( 'landscape2.jpg' );

  # display the output

  echo $mag->getHtml();

  我们可以事先定义我们所希望的图像杂志的宽度。因此,如果我们找到浏览器的宽度,我们就可以决定我们布局图像的宽度,这很容易。因为我们已经学会了第二种技巧:自适应内容的流动布局。在他的脚本中,Kevin Hale使用了一个称之为getBrowserWidth() 的方法,你可以在他的文章中更深入的了解该方法的代码。

  如果我们用这种方法取代浏览器的宽度值,然后用这个值去寻找我们内容区域的像素宽度(不论图像放在那个区域)。比方说,我们希望将图像放到70%的内容区域中,利用简单的数学知识,我们只需要找到浏览器宽度值的70%就行。

  Pixel width = 内容区域百分比 x  浏览器宽度

  $width = 0.70 x getBrowserWidth();

  这是很基本的数学知识,是流动布局中处理图像最基本的方法,调整PHP脚本自动寻找图像的像素值。这样,在一个流动布局中,你就能很好的处理图像或其余已经设置宽度的内容。
#p#副标题#e#
四、jQuery圬工

  不去考虑不断改变屏幕分辨率时css中的存在的许多问题。倒有一个共同的问题是许多设计师更可能面临的--多重内容盒子。当有许多浮动元素时,一些尴尬的空白会出现在高度变换的区域之间,下面是这方面的一个例子:

  

 

  如果我们打算在一个固定宽度的布局中使用多个div,固定很容易:只需调整所有div在合适的位置就行,在流动设计中用这种方式处理多个divs似乎不可能。布局的每一次调整,在新的点上将出现不同数量的空白。

  

 

  在较小分辨率下查看相同的布局,布局变成了两栏。但是,在这种情况下,我们得了不同的空白。任何设计师觉得这是一个尴尬的问题。通常情况下,因为没有可行方案解决此问题,这种布局被强行设置成固定宽度。

  幸运的是,这个问题不是不可能解决,而是相当容易--源于 David DeSandro’s jQuery Plugin: jQuery Masonry 提供的方法。

  jQuery圬工是什么?

  jQuery圬工是一个非常容易使用的插件,用David DeSandro 自己的话说:“将jQuery看作css浮动的对立面,浮动元素的排列是先横向后纵向,圬工排列是先纵向后横向,其结果是在高度变换元素的垂直方向上没有间隙,就像是一座石头强。”

  如何使用jQuery masonry

  在上面的例子中,所有盒子被放置在 ID为“item”的段落之中,“item”设置了30%的宽度,并向左浮动,所有这些放置在宽度为90%的# wrapper中,一旦段落的宽度达到#wrapper的宽度,无论是否有空白留下,它将新起一行。

  下载 jQuery Masonry 插件,并对#wrapper应用masonry()方法,就很容易修复它。

  $('#wrapper').masonry();

  下面两张图片显示了该插件的力量。第一个是在大分辨率屏幕上的布局情况,第二个是同样的布局,在小分辨率屏幕中查看,它折叠成了两栏。

  

 

  

 

  该插件的一个bug和一个修复方法

  使用该插件,如果用户缩放浏览器,你会注意到div层保持在原来的位置,但是刷新后,它有完好。但用户不知道需要书信去修复该问题。因此,按下面的方法改变html代码将很容易的修复该问题。

  

  现在,用户每次改变浏览器的大小,浏览器会自动刷新并重载整个脚本。

上一条:HTML5和CSS3让网页设计提升到下一个高度 下一条:通过实例学习CSS布局网页

相关文章

最新文章