CSS3 自适应宽度、高度（媒体设备类型）

基本信息

源码名称：CSS3 自适应宽度、高度（媒体设备类型）

源码大小：0.55M

文件格式：.zip

开发语言：CSS

更新时间：2017-07-04

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
body { margin: 20px 0; }
#container {
    width: 960px;
    margin: auto;
}
#wrapper {
    width: 740px;
    float: left;
}
.height {
    line-height: 600px;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
    margin: 0 0 20px 0;
}
#main {
    width: 520px;
    float: right;
    background: yellow; /* 黄色 */
}
#sub01 {
    width: 200px;
    float: left;
    background: orange; /* 橙色 */
}
#sub02 {
    width: 200px;
    float: right;
    background: green; /* 緑色 */
}
/* 窗口宽度在1000px以上 */
@media screen and (min-width: 1000px) {
/* 3栏显示*/
#container { width: 1000px; }
#wrapper {
    width: 780px;
    float: left;
}
#main {
    width: 560px;
    float: right;
}
#sub01 {
    width: 200px;
    float: left;
}
#sub02 {
    width: 200px;
    float: right;
}
}
/* 窗口宽度在640px以上、999px以下 */
@media screen and (min-width: 640px) and (max-width: 999px) {
/* 2栏显示 */
#container { width: 640px; }
#wrapper {
    width: 640px;
    float: none;
}
.height { line-height: 300px; }
#main {
    width: 420px;
    float: right;
}
#sub01 {
    width: 200px;
    float: left;
}
#sub02 {
    width: 100%;
    float: none;
    clear: both;
    line-height: 150px;
}
}
/* 窗口宽度在639px以下 */
@media screen and (max-width: 639px) {
/* １栏显示  */
#container { width: 100%; }
#wrapper {
    width: 100%;
    float: none;
}
body { margin: 20px; }
.height { line-height: 300px; }
#main {
    width: 100%;
    float: none;
}
#sub01 {
    width: 100%;
    float: none;
    line-height: 100px;
}
#sub02 {
    width: 100%;
    float: none;
    line-height: 100px;
}
}
</style>
</head>
<body>
<div id="container">
    <div id="wrapper">
        <div id="main" class="height">主栏目</div>
        <div id="sub01" class="height">次要栏目</div>
    </div>
    <div id="sub02" class="height">辅助栏目 </div>
</div>
</body>
</html>