电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式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/)