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


Posted in HTML / CSS onApril 21, 2013

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

HTML / CSS 相关文章推荐
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 #HTML / CSS
程序设计HTML5 Canvas API
Apr 08 #HTML / CSS
html5与css3小应用
Apr 03 #HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 #HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 #HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 #HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 #HTML / CSS
You might like
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP 高手之路(三)
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python的else子句使用指南
2016/02/27 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
入党自我评价范文
2014/02/02 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
2014年销售员工作总结
2014/12/01 职场文书
婚庆主持词大全
2015/06/30 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS