瀏覽器在不同的設備上大小布局不同，而且就算在相同設備上用戶也會改變瀏覽器的大小，我們希望佈局可以更好的適配用戶的瀏覽器顯示區域大小，可以採用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的特徵在佈局的時候是非常好用的，以上我們是不改變佈局樣式，還有一些情況，我們依據不同的屏幕大小可以將非重點的內容塊捨棄掉。在新的佈局中，建議多使用這種方案。