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

当前位置 : 首页 > 网页制作 > CSS > 创造100% 自适应css布局的行之有效的方法

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

来源: 作者: 时间:2015-12-07 14:03
在这篇文章,我们将讨论创造100%功能自适应css布局的行之有效的方法,并提供其他教程和实践的详细清单.
在这篇文章,我们将讨论创造100%功能自适应css布局的行之有效的方法,并提供其他教程和实践的详细清单.
流动网页设计有很多好处,但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、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将维持不变。

1
Tag:
上一篇:[css3]
下一篇:通过实例学习CSS布局网页
网友评论

<