当前位置: 代码迷 >> HTML/CSS >> 施用IE10和CSS Device Adaptation
  详细解决方案

施用IE10和CSS Device Adaptation

热度:546   发布时间:2013-01-20 10:22:41.0
使用IE10和CSS Device Adaptation

浏览器在不同的设备上大小布局不同,而且就算在相同设备上用户也会改变浏览器的大小,我们希望布局可以更好的适配用户的浏览器显示区域大小,可以采用CSS Device Adaptation,在IE10上进行测试。


先最简单的HTML代码


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .bigTiles {
            width: 691px;
            height: 336px;
            float:left;
        }

        .smallTiles {
            width: 159px;
            height: 159px;
             float:left;
        }

        .middleTiles {
            width: 336px;
            height: 336px;
             float:left;
        }
    </style>
</head>
<body>
    <div class="bigTiles" style=" background-color:yellow"></div>
    <div class="middleTiles" style=" background-color:blue"></div>
    <div class="smallTiles" style=" background-color: red"></div>
    <div class="smallTiles" style=" background-color:burlywood"></div>
</body>
</html>

在IE10上的运行结果

当屏幕宽1360的时候


当屏幕是1220大小的时候


由于浏览器的大小改变,布局有了变化,现在我们加入css3的新特征CSS Device Adaptation

css的代码如下

    <style>
        @media screen and (min-width: 1350px) {
            @-ms-viewport {
                width: 1360px;
            }

            .bigTiles {
                width: 691px;
                height: 336px;
                float: left;
            }

            .smallTiles {
                width: 159px;
                height: 159px;
                float: left;
            }

            .middleTiles {
                width: 336px;
                height: 336px;
                float: left;
            }
        }

        @media screen and (min-width: 1000px) and (max-width: 1349px)  {
            @-ms-viewport {
                width: 1000px;
            }

            .bigTiles {
                width: 691px;
                height: 336px;
                float: left;
            }

            .smallTiles {
                width: 99px;
                height: 99px;
                float: left;
            }

            .middleTiles {
                width: 159px;
                height: 159px;
                float: left;
            }
        }
    </style>

我们适配了两种屏幕,一种是比1349px宽,一种是宽度在1000px-1349px之间,现在我们用IE10进行测试

在1360宽度下


在1220宽度下


色块改变了大小,所以布局没有改变。

CSS Device Adaptation的特征在布局的时候是非常好用的,以上我们是不改变布局样式,还有一些情况,我们依据不同的屏幕大小可以将非重点的内容块舍弃掉。在新的布局中,建议多使用这种方案。



  相关解决方案