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

本篇文章小编为大家介绍,用HTML5实现网站在windows8中贴靠的方法。需要的朋友参考下

 首先来了解一下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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用
HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这
近日,微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号,项目名称为 ChakraCore,遵循MIT许可协议。 ...,HTML5中国,中国最大的HTML5中文门户。
这篇文章报道的不是“新闻”,因为W3C早已开始着手CSS变量方面的工作。至于Google,则要追溯到11月初,当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...,HTML5中国,中国最大的HTML5中文门户。
25年后,你发的编程知识经验还会增加,但薪水却不加了;25年后,如果你还热爱编程便不会选择转行去当管理人员;25年后,你想和好友去玩耍,而经理却让你加班;那么你是否想过这25年之间做出另一种选择呢? ...,HTML5中国,中国最大的HTML5中文门户。