使用media标签使页面样式随着屏幕大小变化
如题，使用media标签可以使得页面大小在发生变化时，样式也发生变化。如下的例子：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.a {
width: 80%;
height: 100px;
background-color: green;
float: left;
}
.b {
width: 20%;
height: 100px;
background-color: blue;
float: left;
}
@media only screen and (max-width:960px){
.a {
width: 20%;
height: 100px;
background-color: green;
clear: left;
}
.b {
width: 20%;
height: 100px;
background-color: red;
clear: right;
}
}
</style>
</head>
<body>
<div class="a">我是第一块</div>
<div class="b">我是第二块</div>
</body>
</html>
利用这个标签可以对原来的PC站点修改样式，做成自适应的站点，符合手机访问样式。值得一提的是，当屏幕大小发生变化时，会按照@media规定的样式发生改变，没有重新定义的样式，仍然会按照原来的PC样式显示。
相关文章
搜索文章：
联系方式：
近期文章