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表示两边允许有浮动元素。