用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 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
咖啡的种类和口感
2021/03/03 新手入门
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
JS获取父节点方法
2009/08/20 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
在python中使用nohup命令说明
2020/04/16 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
事业单位辞职信范文
2014/01/19 职场文书
学校万圣节活动方案
2014/02/13 职场文书
四查四看整改措施
2014/09/19 职场文书
代办出身证明书
2014/10/21 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
地陪导游欢迎词
2015/01/26 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2016中秋节广告语
2016/01/28 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby