用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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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序列号生成函数和字符串替换函数代码
2012/06/07 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python 打印中文字符的三种方法
2018/08/14 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python定义类self用法实例解析
2020/01/22 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python的launcher用法知识点总结
2020/08/07 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
函授大专自我鉴定
2013/11/01 职场文书
内业资料员岗位职责
2014/01/04 职场文书
在校学生职业规划范文
2014/01/08 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
员工规章制度范本
2015/08/07 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python