用HTML5實現網站在windows8中貼靠的方法_HTML5教程
推薦：HTML5之HTML元素擴展(下)—增強的Form表單元素值得關注在HTML5增強的元素中，最值得關注的就是表單元素;在HTML5中，表單已經做了重大的修整，一些以前需要通過JavaScript編碼實現的功能現在無需編碼就可輕松實現,感興趣的朋友可以詳細了解下，或許對你有所幫助
首先來了解一下windows 8 的貼靠，在windows 8 中的Metro應用可以將屏幕很好的進行分割.如下圖
讓用戶在使用時可以非常方便的切換。 系統對貼靠也是有硬性規定的。最多兩個屏幕，而且是一個大的一個小的。并且小屏的寬度是固定的 320像素。
所以當用戶把網站貼成小屏幕，這個時候頁面默認是等比例縮小的。如下圖:
那么怎么很好的解決這樣的一個問題呢？讓網站在windows 8的貼靠小屏幕下顯示非常友好的效果呢？下面我有一個簡單的示例
如圖 一個非常簡單的并且傳統的頁面，包括橫向排列的導航，內容等.
而傳統的代碼也是這樣
復制代碼 代碼如下:www.ghpqjb.com
<!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像素的寬度進行布局和顯示即可
實現代碼如下: 在原有頁面中新加入以下樣式代碼
復制代碼 代碼如下:www.ghpqjb.com
@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
分享：html5 canvas里繪制橢圓并保持線條粗細均勻的技巧Canvas里繪制橢圓是一個很常見的需求，但是目前大多數瀏覽器還沒有實現該方法，因此經常會使用arc或者arcTo方法結合scale變形來繪制橢圓，感興趣的朋友可以了解下，希望可以幫助到你們
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發的過程介紹
- HTML5 對各個標簽的定義與規定：body的介紹
- 關于HTML5的安全問題開發人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數據庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數據本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
- 相關鏈接：
- 教程說明：
HTML5教程-用HTML5實現網站在windows8中貼靠的方法
。