• 售前

  • 售后

热门帖子
入门百科

用HTML5实现网站在windows8中贴靠的方法

[复制链接]
猥琐大叔求教pv 显示全部楼层 发表于 2021-10-25 19:24:44 |阅读模式 打印 上一主题 下一主题
首先来了解一下windows 8 的贴靠,在windows 8 中的Metro应用可以将屏幕很好的举行分割.如下图


让用户在使用时可以非常方便的切换。 体系对贴靠也是有硬性规定的。最多两个屏幕,而且是一个大的一个小的。并且小屏的宽度是固定的 320像素。
所以当用户把网站贴成小屏幕,这个时候页面默认是等比例缩小的。如下图:

那么怎么很好的办理如许的一个题目呢?让网站在windows 8的贴靠小屏幕下表现非常友爱的结果呢?下面我有一个简朴的示例
如图 一个非常简朴的并且传统的页面,包罗横向排列的导航,内容等.

而传统的代码也是如许

复制代码代码如下:
<!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>

  如许的页面在贴靠结果就是缩小的如图:

如何修改呢? 在传统的如许页面中我们只必要根据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;
    }
}

  在全屏浏览和传统浏览下还是没有任何区别的。
区别就在于将他贴靠为小屏幕 如下图 表现结果是不是很显着呢。

本示例代码下载/Files/risk/Index.rar

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作