Responsive自适应网页设计与ResponsiveColumn自适应列实例

Responsive Web Design - 自适应网页设计概念

自适应网页设计是指自动识别屏幕宽度、并做出相应调整的网页设计。包括两方面：

页面可以根据不同终端的屏幕宽度自动调整，兼容电脑、手机等设备
根据浏览器窗口的大小自动调整。

“自适应网页设计”（Responsive Web Design）的概念是2010由Ethan Marcotte提出。

自适应网页在html中的实现

通过HTML中实现自适应的页面主要是使用HTML及CSS样式实现，具体包括

添加viewport的元信息标签

<meta name="viewport" content="width=device-width, initial-scale=1" />

对以上的标签说明如下：

viewport - 指的是网页默认的宽度和高度
width=device-width　－　网页宽度默认等于屏幕宽度
initial-scale=1　，原始缩放比例，1表示网页初始大小占屏幕面积的100%

使用相对宽度

如果是绝对宽度，无法变化就谈不上自动适应了，所以不能使用 px单位定义宽度。
可以使用百分比或是auto。

width: xx%;
width:auto;

使用相对字体大小

使用相对大小（em），不使用绝对大小（px）。

div {font: normal 100% Helvetica, Arial, sans-serif;}

字体大小是页面默认大小的100%，即16像素

{font-size: 1.5em;
}

h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）

流动布局

使用CSS 的float来进行布局。

.main {float: right;width: 70%;?
}
.left {float: left;width: 22%;
}

根据屏幕大小加载不同的CSS文件

对应在HTML文件中导入CSS的两种不同方式，可以在标签导入不同CSS文件，也可以在CSS文件中直接定义。使用的都是CSS3 的Media特性。

在CSS导入标签中，使用media属性来进行选择，比如：

　<link rel="stylesheet" type="text/css"　media="screen and (max-device-width: 500px)" href="tinyScreen.css" />

屏幕小于500像素（max-device-width: 500px）则加载这个CSS文件。
也可以在CSS文件中使用 @import

@import url("tinyScreen.css") screen and (max-device-width: 400px);

在CSS文件中定义不同频宽的样式

也可以根据屏幕宽度定义不同的CSS

　@media screen and (max-device-width: 500px) {.column {float: none;width:auto;}#leftbar {display:none;}}

responsive布局原则与技巧

1，尽量避免使用无用的div
2, 不要使用内联元素
3, 尽量少用js
4, 不要使用没用的绝对定位,和浮动;
5，放弃100%设置

ResponsiveColumn自适应列实例

没有自适应的CSS样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.grid4 {width: 960px;margin: 20px auto;
}.grid4 div {width: 225px;background: #ccc;margin: 10px;float: left;/*font style*/font-size: 50px;font-weight: bold;color: orange;text-align: center;line-height: 100px;
}.grid4 .first {margin-left: 0px;
}.grid4 .last {margin-right: 0px;
}
</style>
</head>
<body><div class="grid4"><!-- 第一行 --><div class="first">Cell1</div><div>Cell2</div><div>Cell3</div><div class="last">Cell4</div><!-- 第二行 --><div class="first">Cell5</div><div>Cell6</div><div>Cell7</div><div class="last">Cell8</div><!-- 第三行 --><div class="first">Cell9</div><div>Cell10</div><div>Cell11</div><div class="last">Cell12</div></div>
</body>
</html>

效果如下：

自适应的CSS样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.col {background: #ccc;float: left;margin-left: 3.2%;margin-bottom: 30px;/*font style*/font-size: 50px;font-weight: bold;color: orange;text-align: center;line-height: 100px;
}/* grid4 col */
.grid4 .col {width: 20%;
}@media screen and (max-width: 740px) {.grid4 .col {width: 31.2%;}.grid4 .col:nth-of-type(4n+1) {margin-left: 3.2%;clear: none;}.grid4 .col:nth-of-type(3n+1) {margin-left: 0;clear: left;}
}@media screen and (max-width: 600px) {/* change grid4 to 2-column */.grid4 .col {width: 48.4%;}.grid4 .col:nth-of-type(3n+1) {margin-left: 3.2%;clear: none;}.grid4 .col:nth-of-type(2n+1) {margin-left: 0;clear: left;}
}
</style>
</head>
<body><div class="grid4"><!-- 第一行 --><div class="col">Cell1</div><div class="col">Cell2</div><div class="col">Cell3</div><div class="col">Cell4</div><!-- 第二行 --><div class="col">Cell5</div><div class="col">Cell6</div><div class="col">Cell7</div><div class="col">Cell8</div><!-- 第三行 --><div class="col">Cell9</div><div class="col">Cell10</div><div class="col">Cell11</div><div class="col">Cell12</div></div>
</body>
</html>

屏幕正常时和上面的效果类似。

屏幕变小，每行三个。

屏幕再小，每行2个

代码解析：

使用@media对不同的屏幕宽度定义不同的CSS样式
@media screen and (max-width: 740px)
nth-of-type(3n+1)
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
类似 div:nth-of-type(3n+1) , 当有12个div元素时，分别对应第1，4、7、10个元素
clear属性的作用就是“清除”浮动，clear属性有种类型的值:both|left|right|none;

clear:left;表示该元素左边不存在浮动元素
clear:right;表示该元素右边不存在浮动元素
clear:both;表示该元素两边都不存浮动元素。
clear:none表示两边允许有浮动元素。