首页 > 代码库 > 什么是流式布局

什么是流式布局

2024-11-27 01:21:02   203人阅读

固定布局经不起未来考验

固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

 

为什么响应式设计需呀百分比布局

仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者间没有任何平滑渐变。

我们需呀将固定像素布局转换成灵活的百分比布局，才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式。

 

将网页从固定布局修改为百分比布局

需要牢记的公式：目标元素宽度 / 上下文元素宽度 = 百分比宽度

 

用em替换px

理由：1.使用IE6的用户也能缩放文字。

           2.em的实际大小是相对于其上下文的字体大小而言。

同样，目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 同样适用于将文字的像素单位转换为相对单位。

注：现代浏览器默认文字大小都是16px，因此一开始给body标签使用一下任意一条规则产生效果相同

[css] view plaincopy
  1. font-size:100%;  
  2. font-size:16px;  
  3. font-size:1em;  

 

弹性图片

去掉图片的width,height属性，指定max-width:100%可使图片自动缩放到与其容器100%匹配，此样式可应用在其他多媒体标签上。

[css] view plaincopy
  1. img, object, video, embed{  
  2.     max-width:100%;  
  3. }  

给弹性图片设置阀值：图片可以随着视口伸缩，但如果将视口拉大，图片可能超出本身大小，因此需要指定max-width:202px，设置阀值。

[css] view plaincopy
  1. .oscarMainImg{  
  2.     width:28.9398281%; /* 201/698 */  
  3.     max-width:202px;  
  4. }  

超级全能max-width属性：另一种限制页面无限扩张的方法是给最外层div设置max-width属性。


为不同的屏幕尺寸提供不同的图片

尝试为较小的屏幕尺寸提供较小的图片。Matt Wilcox的解决方案会根据全尺寸图片自动创建各种尺寸的图片，此解决方案允许基于一组屏幕尺寸断点

什么是流式布局


联系
我们