用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一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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判断表是否存在的方法
2015/06/18 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python实现坦克大战
2020/04/24 Python
Python解析微信dat文件的方法
2020/11/30 Python
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
办公室综合文员岗位职责范本
2014/02/13 职场文书
公司委托书格式范文
2014/04/04 职场文书
带病坚持工作事迹
2014/05/03 职场文书
婚庆公司计划书
2014/09/15 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
中标通知书
2015/04/17 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
Python中time标准库的使用教程
2022/04/13 Python