网页从固定布局到百分比布局上演王者归来
20世纪90年代末,我刚学习做网页的时候,页面布局结构都是基于表格的。通常,屏幕上显示的各部分元素都是百分比宽度。例如,左侧的导航栏珂能占据20%的屏幕宽度,主内容区占据80%。那时的浏览器视口还没行像今天这样天差地别。所以表格式布局在有限范围的视口中表现良好且能自由伸缩。置入太在意某些句子在不同大小的屏幕上效果不一样。不过,随着CSS的兴起、网页设计也更加接近印刷设计,很多人(包括我) 开始使用固定的基于像素的布局,而基于百分比的布局逐年减少。
所有伟大的设计和思想,都会卷土重来。迷你车、烫发以及喇叭牛仔裤都在多年沉寂后卷土重来。现在,轮到百分比布局方法上演王者归来了。
固定布局经不起未来考验
固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。
为什么响应式设计需要百分比布局
仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组CSS媒体查询规则突变到另一组,两者间没有任何平滑渐变。
我们需呀将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式。
将网页从固定布局修改为百分比布局
需要牢记的公式:目标元素宽度 / 上下文元素宽度 = 百分比宽度
用em替换px
理由:1.使用IE6的用户也能缩放文字。
2.em的实际大小是相对于其上下文的字体大小而言。
同样,目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 同样适用于将文字的像素单位转换为相对单位。
注:现代浏览器默认文字大小都是16px,因此一开始给body标签使用一下任意一条规则产生效果相同
[css] view plaincopyprint?font-size:100%;
font-size:16px;
font-size:1em;
font-size:100%;
font-size:16px;
font-size:1em;
弹性图片
去掉图片的width,height属性,指定max-width:100%可使图片自动缩放到与其容器100%匹配,此样式可应用在其他多媒体标签上。
[css] view plaincopyprint?img, object, video, embed{
max-width:100%;
}
img, object, video, embed{
max-width:100%;
}给弹性图片设置阀值:图片可以随着视口伸缩,但如果将视口拉大,图片可能超出本身大小,因此需要指定max-width:202px,设置阀值。
[css] view plaincopyprint?.oscarMainImg{
width:28.9398281%; /* 201/698 */
max-width:202px;
}
.oscarMainImg{
width:28.9398281%; /* 201/698 */
max-width:202px;
}超级全能max-width属性:另一种限制页面无限扩张的方法是给最外层div设置max-width属性。
为不同的屏幕尺寸提供不同的图片
尝试为较小的屏幕尺寸提供较小的图片。Matt Wilcox的解决方案会根据全尺寸图片自动创建各种尺寸的图片,此解决方案允许基于一组屏幕尺寸断点