编写自适应网页的方法

大家好，我是吉礻羊。

有人@我说不知道怎么写自适应的网页，今天就先不写优化的了，我把写自适应网页的方法说下。

编写自适应网页的方法自适应的网页

工具：dw网页设计软件；ps图像处理软件。

方法/步骤：

1，在<head></head>之间加入加入一行viewport标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

由于大家使用的电脑分辨率不一样，大小也不一样，所以网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，对图像来说也是这样。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

2，字体也不能使用绝对大小（px），而只能使用相对大小（em）。

例如：

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

上面的代码指定，字体大小是页面默认大小的100%，即14像素。

3，"自适应网页"的实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0" />
<title></title>
<style>
body {
height: 800px;
}
.header {
width: 100%;
height: 15%;
background-color: aquamarine;
}
.leftside {
width: 20%;
height: 75%;
background-color: skyblue;
float: left;
}
.main {
float: right;
width: 80%;
height: 75%;
background-color: steelblue;
}
.footer {
clear: both;
width: 100%;
height: 10%;
background-color: darkgray;
}
</style>
</head>
<body >
<div class="header"></div>
<div class="leftside"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>