前言：
现在我们对“div高度自适应屏幕”大体比较关怀，你们都需要学习一些“div高度自适应屏幕”的相关内容。那么小编同时在网络上网罗了一些关于“div高度自适应屏幕””的相关资讯，希望咱们能喜欢，看官们一起来了解一下吧！大家好，我是吉礻羊。
有人@我说不知道怎么写自适应的网页，今天就先不写优化的了，我把写自适应网页的方法说下。
自适应的网页
工具：dw网页设计软件；ps图像处理软件。
方法/步骤：
1，在<head></head>之间加入加入一行viewport标签。
<meta name="viewport" content="width=device-width,initial-scale=1" />
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>
标签： #div高度自适应屏幕 #div图片自适应网页 #html自适应宽度
