如下图:
经常我们使用自己的电脑实现这种布局的时候,在自己的屏幕实现出来是正常的效果(貌似就是我们想要的),不过在不同的浏览器上运行的时候,多少还是会有些异样的差别,当放到别人的不同尺寸的电脑(手机)上的时候,这时候差别就更加明显了.也就是不是通用的!,那么这个代码就是有缺陷的.因此,这样解决--我们在网页的<head>中加入:
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport:是用户网页的可视区域
content的属性:
1.width:控制viewport的大小,可以指定一个值,值为数字或者关键字device-width
2.height:和width相对应,指定高度.
3.inital-scale: 页面首次显示的缩放比例, 取值1.0则网页按照实际尺寸显示,无任何缩放,
4.maxmum-scale=1.0,用户能将页面放大的程度,1.0将禁止用户放大
5.minmum-scale=1.0,用户能将页面放小的程度,1.0将禁止用户缩小
6.user-scalable:设置是否允许用户对页面进行手动缩放,no为禁止缩放
还有一点就是我们并不能设置固定的宽度,这样不友好,因为我们并不知道其他的设备的屏幕大小,这样统一设置固定大小的方式太强硬,因此使用默认可视区的宽度,并使用百分比的形式来显示宽度.这样就能自适应不同的设备.
不采取设置固定的像素大小,如:width= 100px; 而是使用width = %; 百分比的形式.
代码如下:
<!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>