想学习超流行的响应式设计？来看看这篇教程【转载】 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title></title>
    <style type="text/css">
        /*自适应页面div均为float 切均为百分比宽度*/
        div {
            height: 80px;
            width: 100%;
            float: left;
        }

        .normal {
            float: none;
        }

        .class1 {
            background-color: blue;
        }

        .class2 {
            width: 40%;
            background-color: aquamarine;
        }

        .class3 {
            width: 60%;
            background-color: crimson;
        }

        .class4 {
            background-color: darkkhaki;
        }

        /*当屏幕小于等于500时使用该样式*/
        @media only screen and (max-width:500px) {
            .class2 {
                width: 100%;
            }

            .class3 {
                width: 100%;
            }
        }
        /*当屏幕处于501-900时 使用该样式*/
        @media only screen and (min-width:501px) and (max-width:900px) {
            .class2 {
                width: 60%;
            }

            .class3 {
                width: 40%;
            }
        }
        /*当屏幕处于501-900时且横屏情况下使用该样式*/
        @media only screen and (min-width:501px) and (max-width:900px) and (orientation:landscape) {
            .class2 {
                width: 60%;
            }

            .class3 {
                width: 40%;
            }
        }
        /*高分辨率设备下使用该样式*/ 
        @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {


        }
    </style>
</head>
<body>
    <div>
        <div class="class1"></div>
        <div class="class2"></div>
        <div class="class3"></div>
        <div class="class4"></div>
    </div>
</body>
</html>

 

posted @ 2015-09-21 15:52  xyzhuzhou  阅读(264)  评论(1)    收藏  举报