施用IE10和CSS Device Adaptation _HTML/CSS

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