用HTML5實現網站在windows8中貼靠的方法

2020-03-24 16:25:36

字體：大中小

來源：轉載

供稿：網友

首先來了解一下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
ul
li Home /li
li Item1 /li
li Item2 /li
li Item3 /li
li Item4 /li
/ul
div
/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.rarhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html5指南-2.如何操作document metadata

下一篇：關于HTML中的滾動條使用技巧分享