CSS3 auto revolution practitioner!

1.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="styles/autoresolution.css" rel="stylesheet" />
</head>
<body>
    <div class="page">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
        <div class="clear">

        </div>
        <div class="bottom">
            bottom
        </div>

    </div>
</body>
</html>

　　2.style sheet

body {
    width: 100%;
}

/*basic universal settings for page main parts*/
.page {
    background-color: #fff;
}

    .page > .left {
        background-color: #f00;
        float: left;
    }

    .page > .right {
        background-color: #f0f;
        float: right;
    }

    .page > .bottom {
        background-color: #00f;
        width: 100%;
    }

.clear {
    clear: both;
}


/*page width bigger than 1024 strategy*/
@media screen and (min-width:1024px) {
    .left {
        width: 40%;
    }

    .right {
        width: 60%;
    }
}

@media screen and (max-width:1024px) {
    .left {
        width: 100%;
    }

    .right {
        width: 100%;
    }
}

　　

posted @ 2016-07-25 15:44  calochCN  阅读(228)  评论(0)    收藏  举报