浏览器在不同的设备上大小布局不同,而且就算在相同设备上用户也会改变浏览器的大小,我们希望布局可以更好的适配用户的浏览器显示区域大小,可以采用CSS Device Adaptation,在IE10上进行测试。
先最简单的HTML代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.bigTiles {
width: 691px;
height: 336px;
float:left;
}
.smallTiles {
width: 159px;
height: 159px;
float:left;
}
.middleTiles {
width: 336px;
height: 336px;
float:left;
}
</style>
</head>
<body>
<div class="bigTiles" style=" background-color:yellow"></div>
<div class="middleTiles" style=" background-color:blue"></div>
<div class="smallTiles" style=" background-color: red"></div>
<div class="smallTiles" style=" background-color:burlywood"></div>
</body>
</html>
在IE10上的运行结果
当屏幕宽1360的时候
当屏幕是1220大小的时候
由于浏览器的大小改变,布局有了变化,现在我们加入css3的新特征CSS Device Adaptation
css的代码如下
<style>
@media screen and (min-width: 1350px) {
@-ms-viewport {
width: 1360px;
}
.bigTiles {
width: 691px;
height: 336px;
float: left;
}
.smallTiles {
width: 159px;
height: 159px;
float: left;
}
.middleTiles {
width: 336px;
height: 336px;
float: left;
}
}
@media screen and (min-width: 1000px) and (max-width: 1349px) {
@-ms-viewport {
width: 1000px;
}
.bigTiles {
width: 691px;
height: 336px;
float: left;
}
.smallTiles {
width: 99px;
height: 99px;
float: left;
}
.middleTiles {
width: 159px;
height: 159px;
float: left;
}
}
</style>
我们适配了两种屏幕,一种是比1349px宽,一种是宽度在1000px-1349px之间,现在我们用IE10进行测试
在1360宽度下
在1220宽度下
色块改变了大小,所以布局没有改变。
CSS Device Adaptation的特征在布局的时候是非常好用的,以上我们是不改变布局样式,还有一些情况,我们依据不同的屏幕大小可以将非重点的内容块舍弃掉。在新的布局中,建议多使用这种方案。