欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

用HTML5实现网站在windows8中贴靠的要领

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   

 起首来相识一下windows 8 的贴靠,在windows 8 中的Metro应用可以将屏幕很好的举办支解.如下图

 

用HTML5实现网站在windows8中贴靠的方式

让用户在行使时可以很是利便的切换。 体系对贴靠也是有硬性划定的。最多两个屏幕,并且是一个大的一个小的。而且小屏的宽度是牢靠的 320像素。

以是当用户把网站贴成小屏幕,这个时辰页面默认是等比例缩小的。如下图:

用HTML5实现网站在windows8中贴靠的方式

那么怎么很好的办理这样的一个题目呢?让网站在windows 8的贴靠小屏幕下表现很是友爱的结果呢?下面我有一个简朴的示例

如图 一个很是简朴的而且传统的页面,包罗横向分列的导航,内容等.

用HTML5实现网站在windows8中贴靠的方式

而传统的代码也是这样


代码如下:
<!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>

  这样的页面在贴靠结果就是缩小的如图:

用HTML5实现网站在windows8中贴靠的方式

怎样修改呢? 在传统的这样页面中我们只必要按照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;
}
}

  在全屏赏识和传统赏识下照旧没有任何区此外。

区别就在于将他贴靠为小屏幕 如下图 表现结果是不是很明明呢。

用HTML5实现网站在windows8中贴靠的方式

本示例代码下载/Files/risk/Index.rar

本文地址:http://itbyc.com/web/html5/13800.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1