首先來瞭解一下windows 8 的貼靠，在windows 8 中的Metro應用可以將螢幕很好的進行分割.如
讓使用者在使用時可以非常方便的切換。 系統對貼靠也是有硬性規定的。最多兩個螢幕，而且是一個大的一個小的。並且小屏的寬度是固定的 320像素。
所以當使用者把網站貼成小螢幕，這個時候頁面預設是等比例縮小的。如:
那麼怎麼很好的解決這樣的一個問題呢？讓網站在windows 8的貼靠小螢幕下顯示非常友好的效果呢？下面我有一個簡單的樣本
一個非常簡單的並且傳統的頁面，包括橫向排列的導航，內容等.
而傳統的代碼也是這樣
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style> .nav { padding: 5px 0px 5px 0px; margin: 0px; width: 100%; list-style-type: none; background-color: #cddcd6; height: 28px; } .nav li { margin: 0px 1px 0px 0px; float: left; background-color: #0094ff; padding: 5px 10px 5px 10px; } .dvItem { width: 100%; height: 400px; background-color: #b6ff00; clear: both; } .main { width: 960px; margin: 0px auto 0px auto; } </style></head><body> <div class="main"> <ul class="nav"> <li>Home</li> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <div class="dvItem"> </div> </div></body></html>
這樣的頁面在貼靠效果就是縮小的:
如何修改呢? 在傳統的這樣頁面中我們只需要根據windows 8 的貼靠特性編寫一份CSS 讓我們頁面以320像素的寬度進行布局和顯示即可
實現代碼如下: 在原有頁面中新加入以下樣式代碼
@media screen and (max-width: 320px) { @-ms-viewport { width: 320px; } .nav { padding: 5px 0px 5px 0px; margin: 0px; width: 100%; background-color:#fff; } .nav li { width: 300px; clear: both; margin: 0px 0px 1px 0px; background-color: #0094ff; padding: 5px 0px 5px 0px; } .dvItem { width: 95%; height: 600px; background-color: #ff00a4; clear: both; } .main { width: 320px; margin: 0px auto 0px auto; } }
在全屏瀏覽和傳統瀏覽下還是沒有任何區別的。
區別就在於將他貼靠為小螢幕 如 顯示效果是不是很明顯呢。
本範例程式碼下載/Files/risk/Index.rar
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
