响应式布局

最新推荐文章于 2024-04-09 17:09:26 发布

kyleing

最新推荐文章于 2024-04-09 17:09:26 发布

阅读量412

点赞数

分类专栏：页面效果

原文链接：https://www.cnblogs.com/ruanmou/p/4832214.html

版权

页面效果专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<style type="text/css">
/*屏幕宽度大于900的时候*/
*
{
    padding:0px;
    margin:0px;
    font-family:"微软雅黑";
}
#header
{
    height:100px;
    border:solid 1px red;
    margin:0px auto;
}
#main
{
    margin:10px auto;
    height:400px;
}
#footer
{
    margin:0px auto;
    height:100px;
    border:solid 1px red;
}
@media screen and (min-width:900px)
{
    #header,#footer
    {
        width:800px;
    }
    #main
    {
        width:800px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:394px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}
@media screen and (min-width:600px) and (max-width:900px)
{
    #header,#footer
    {
        width:600px;
    }
    #main
    {
        width:600px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:396px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        display:none;
    }
}
@media screen and (max-width:600px)
{
    #header,#footer
    {
        width:300px;
    }
    #main
    {
        width:300px;
        height:400px;;
    }
    #main-left
    {
        display:none;
    }
    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }
    #main-right
    {
        display:none;
    }
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<div id="header">头部</div>
<div id="main">
  <div id="main-left">主题-左边</div>
  <div id="main-center">主题-中间</div>
  <div id="main-right">主题-右边</div>
</div>
<div id="footer"></div>
</body>

来源：http://www.cnblogs.com/ruanmou/p/4832214.html 的底下一小部分