首先來了解windows 8 的貼靠，在windows 8 中的Metro應用可以將屏幕很好的進行分割.如下圖
讓使用者在使用時可以非常方便的切換。 系統對貼靠也是有硬性規定的。最多兩個螢幕，而且是一個大的一個小的。且小螢幕的寬度是固定的 320像素。
所以當使用者把網站貼成小螢幕，這時候頁面預設是等比例縮小的。如下圖:
那怎麼很好的解決這樣的一個問題呢？讓網站在windows 8的貼靠小螢幕下顯示非常友善的效果呢？下面我有一個簡單的範例
如圖 一個非常簡單的並且傳統的頁面，包括橫向排列的導航，內容等.
而傳統的代碼也是這樣
/head>
- Home
- Item1
- Item2
- Item3
- Item4
這樣的頁面在貼靠效果就是縮小的如圖:
如何修改呢? 在傳統的這樣頁面中我們只需要根據windows 8 的貼靠特性編寫一份CSS 讓我們頁面以320像素的寬度進行佈局和顯示即可
實現代碼如下: 在原有頁面中新加入以下樣式代碼
複製代碼
.nav {
nav; 5px 0px 5px 0px;
margin: 0px;
width: 100%; background-color:#fff;
}
. li { > clear: both;
margin: 0px 0px 1px 0px;
background-color: #0094ff;
padding: 5px 0px 5px 0px
}
> width: 95%;
height: 600px;
background-color: #ff00a4;
clear: both;
}
.main {
width:;
margin: 0px auto 0px auto;
}
}
在全螢幕瀏覽和傳統瀏覽下還是沒有任何區別的。
差別就在於將他貼靠為小螢幕 如下圖 顯示效果是不是很明顯呢。
本範例程式碼下載
/Files/risk/Index.rar
