大家好,我是吉礻羊。
有人@我说不知道怎么写自适应的网页,今天就先不写优化的了,我把写自适应网页的方法说下。
自适应的网页
工具: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,"自适应网页"的实例:
<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> |