Board logo

标题: 响应式Web设计:使用HTML5和CSS3实践 (6) [打印本页]

作者: look_w    时间: 2019-2-18 19:07     标题: 响应式Web设计:使用HTML5和CSS3实践 (6)

第3章 拥抱流式布局
1. 为什么固定布局经不起考验

我们使用固定布局,当不同的视口出现的时候,你可以单独增加媒体检测,但未来会有更多大小不一的视口出现。
2. 为什么响应式布局需要百分比设计

使用百分比布局创建流动的弹性界面,同时使用媒体查询来限制元素的变动访问,将这两者组合一起构成了响应式设计的核心,基于此可以真正创造出真正完美的设计。
3. 将网页从固定布局修改为百分比布局

在可预见的未来,我们的网页制作都是基于设计图的度量元素的大小、外边距来写CSS代码。我们该如何将固定尺寸转换为相对尺寸呢?
3.1 需要牢记的公式

目标元素宽度 / 上下文元素宽度 = 百分比宽度
3.2 设置百分比元素的上下文

在我们的例子中,#wrapper是内容区、侧边栏、页脚设定宽度的上下文,我们需要给他们设定百分比值。当然你也可以给#wrapper设定一个百分比,对于#wrapper而言,百分比是相对于视口尺寸而言的。

我们先来看看头部,#header(目标元素)宽度为940像素,#wrapper(上下文元素)宽度为940像素。按照计算公司得到的结果是0.979166667,设置到CSS中是:

width: 97.9166667%; /* 940 ÷ 960 */

同样的设置可以被应用到#navigation和#footer中。

再来看#content和#sidebar,比如我自己改写的例子中#content的宽度为666像素,#siderbar为220个像素,计算得到百分比分别为:666/960*100=69.375%和(220-2)/960*100%=22.708333333333332%(2像素为border-right的值)。

接下来继续使用,将页面各处10像素的内边距、外边距也替换为等价的百分比,所有这些间距都是基于960像素的上下文,替换成对应的百分比就是:1.0416667%(10/960)。
3.3 必须时刻牢记上下文

一个需要注意的问题是百分比设置的上下文,在该书的例子中的导航栏中有ul>li>a的结构,我们给a设定了margin-right:25px来控制导航元素之间的间距。但是使用上述的公式将固定限速设置为百分比后发现并不起作用。因没有为li设定宽度,子节点a找不到上下文的宽度。对此解决办法有很多,其中一种是直接将margi-right属性设置到li上来,以为内ul是有设置宽度的。




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0