有些时候我们需要把固定宽度改为百分比,一个简易可行的公式,将固定像素宽度转换对应的百分比宽度:
[quote style=’1′ cite=”]目标元素宽度÷上下文元素宽度=百分比宽度[/quote]

加入有两个层wrapper,header,其中wrapper包裹header,举例:

#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}

#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}

按公式转换得出如下:

#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* 控制最外层的div,96%只是最贴近实际效果值,也可以写100% ,要看实际情况*/
}

#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 ÷ 960 */
}

说下小数点位数太多的问题。怎么看它都不是一个简洁的数字,但这样做可以提供更加精确的结果。

最后说下关于文字字号大小的问题,其实也是可以按公式计算,首先值得注意的是,现代浏览器的默认文字大小都是16 像素(显式声明的除外)。因此一开始给body 标签应用下列任何一条规则所产生的效果都一样:

font-size: 100%;
font-size: 16px;
font-size: 1em;

那么如果有个以下的字体设置:

#logo {
font-size: 48px;
}

按公式转换为:

#logo {
font-size: 3em; /* 48 ÷ 16 = 3*/
}

再稍微复杂些说明上下文,有如下html代码

<h1>测试<span>上下文</span></h1>

样式分别为:

h1 {font-size: 4.3125em; } /* 69 ÷ 16 */

#content h1 span {
line-height: 1.052631579em; /* 40 ÷ 38 */
font-size: .550724638em; /* 38 ÷ 69 */
}

可以看到<span>元素的文字大小(38 像素)是相对于其父元素的文字大小(69 像素)而言的。

而它的行高(40 像素)则是相对于其本身的文字大小(38 像素)而言。