瀏覽器在不同的裝置上大小布局不同，而且就算在相同裝置上使用者也會改變瀏覽器的大小，我們希望布局可以更好的適配使用者的瀏覽器顯示地區大小，可以採用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的特徵在布局的時候是非常好用的，以上我們是不改變配置樣式，還有一些情況，我們依據不同的螢幕大小可以將非重點的內容塊捨棄掉。在新的布局中，建議多使用這種方案。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
