仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS 媒体查询规则突变到另一组，两者之间没有平滑渐变。我们需要将固定像素布局转换成灵活的百分比布局。这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。
一、将网页从固定布局修改为百分比布局
1、将固定像素宽度转换对应的百分比宽度
需牢记的公式： 目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度 注：要牢记上下文，百分比是相对上下文而言的
2、用em替换px
em的实际大小是相对于其上下文的字体大小而言。如果我们给<body>标签设置文字大小100%，给其他文字使用相对单位em，哪些文字就会受body上的初始声明影响。这样的好处在于，如果完成所有文字排版后，又要将页面文字统一放大一点，我们就可以修改body的文字大小，所有其他文字也会相应变化。
公式： 目标元素尺寸 ÷ 上下文元素尺寸 = 百分比尺寸 现代浏览器默认字体大小16px，因此一开始给body标签应用下列任何一条规则所产生的效果都一样：font-size：100% ；font-size:16px; font-size:1em; 相对字体大小也是相对于上下文而言的，例如页面中有标签
<h1>I am<span>coder</span></h1>
修改相对单位后样式：
h1{font-size : 4.3125em} /*69除以16*/ h1 span{ line-height: 1.052631579em; /*40除以69*/ font-size: .550724638em; /*38除以69*/ }
其中，<span>文字大小（38px）是相对于其父元素的文字大小（69px）而言。它的行高（40px）则是相对其本身文字大小（30px）而言