响应式布局与自适应布局的区别:自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。
手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小。这就是响应式布局。
但是无论怎样,他们主体的内容和布局是没有变的。
响应式的概念应该覆盖了自适应,而且涵盖的内容更多。
自适应还是暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。如果下面的网址,屏幕宽度大于1300像素,则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。
如果屏幕宽度在400像素以下,则6张图片分成三行。
接下来我来介绍一下实现响应式布局的方法:
看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col-4{
width: 33.33333%;
}
[class^="col-"],[class*="col-"]{
box-sizing:border-box;
float: left;
min-height: 1px;
}
.gzNews{
background: #50A6D7;
}
.gdNews{
background: #34B72E;
}
.gnNews{
background: #7948BF;
}
</style>
</head>
<body>
<div class="row cl" style="margin:10px 0px;">
<div class="col-4 gzNews">dd</div>
<div class="col-4 gdNews" style="padding:0px 5px;">cc</div>
<div class="col-4 gnNews" style="padding:0px 5px;">aa</div>
</div>
</body>
</html>
代码运行结果:
注意:
1.宽度用百分比。
2.选择器[class^="col-"]:
class属性中以col-开头的属性;
选择器[class*="col-"]:
class属性中包含col-子串的属性。
3."box-sizing:border-box"作用:
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
此CSS属性可以防止内容的溢出。
4.流动布局(fluid grid)
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。另外,绝对定位(position: absolute)的使用,也要非常小心。
参考资料:
http://my.oschina.net/u/1992917/blog/383238