用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 弹性布局快速入门
Jun 06 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 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中foreach语句控制数组循环的用法
2015/11/30 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python numpy数组转置与轴变换
2019/11/15 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
银行存款证明样本
2014/01/17 职场文书
承诺保证书格式
2015/02/28 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
python批量创建变量并赋值操作
2021/06/03 Python