随着科技的日新月异，各种移动端层出不求，屏幕的尺寸也大小不一，一个网页要如何才能做到自适应不同尺寸的移动端呢？最简单的方法就是编写不同的网页来应对不同的移动端。但是这种方法太过于浪费资源，而且还会大大加剧网站的制作期限，那么如何使用一个页面来自动适应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;
}
}
注意：最大宽度的限制条件一定要从大到小依次往下写，否则样式可能无法达到想要的效果
更多推荐
html 电脑页面比例自适应,html网页自适应不同尺寸的电脑屏幕
发布评论