用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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 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
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php微信支付之APP支付方法
2015/03/04 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
Vue组件基础用法详解
2020/02/05 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
Python中音频处理库pydub的使用教程
2017/06/07 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
英文求职信结束语大全
2013/10/26 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
python requests模块的使用示例
2021/04/07 Python
python实现简易自习室座位预约系统
2021/06/30 Python