随着科技的日新月异,各种移动端层出不求,屏幕的尺寸也大小不一,一个网页要如何才能做到自适应不同尺寸的移动端呢?最简单的方法就是编写不同的网页来应对不同的移动端。但是这种方法太过于浪费资源,而且还会大大加剧网站的制作期限,那么如何使用一个页面来自动适应PC端、手机端、以及平板等不同的设备呢?今天就让我们来学习一下。
首先,在页面中尽量使用相对宽度,而不是绝对宽度例如:
div{ width: 60%;} 或者 div{ width: auto;}
其次,在页面布局时尽量使用流动布局例如:
div{ float: left;}
这样有什么好处呢?就是当容器的宽度不够时并不会出现溢出现象,而是自动排到下方。
自适应网页最重要的根据不同屏幕尺寸加载不同样式,那么如何实现这一点。首先要在head里加上这一句话:
其中‘viewport’是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),
原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
接下来是根据不同的尺寸规划不同的样式,以下例子是当尺寸分别为1200px以上、1200px以下、800px以下:
div{
background-color: #008800;
height: 800px;
width: 800px;
color: #00ffff;
font-size: 36px;
}
@media screen and (max-width: 1200px){
div{
background-color: #000000;
height: 400px;
width: 400px;
color: #00ff00;
font-size: 24px;;
}
}
@media screen and (max-width: 800px) {
div{
background-color: #000055;
height: 100px;
width: 100px;;
color: #ff0000;
font-size: 14px;
}
}
注意:最大宽度的限制条件一定要从大到小依次往下写,否则样式可能无法达到想要的效果