zoukankan      html  css  js  c++  java
  • media query(屏幕自适应布局)

    <style>
    #container{
    margin:auto;
    750px;
    }
    #container>div{
    border:1px solid #aaf;
    text-align:left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-radius:12px 12px 0 0;
    background-color:#ffc;
    padding:5px;
    }
    div #left{
    300px;
    height:230px;
    float:left;
    }
    div #main{
    450px;
    height:230px;
    float:left;
    clear:right;
    }
    div #right{
    750px;
    float:left;
    }
    /*设置浏览器宽度大于1000px时的cs样式*/

    @media screen and (min-1000px){
    #container{
    margin:auto;
    960px;
    }
    #container>div{
    border:1px solid #aaf;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-radius:12px 12px 0 0;
    background-color:#ffc;
    padding:5px;
    }
    div #left{
    240px;
    height:240px;
    float:left;
    }
    div #main{
    460px;
    height:240px;
    float:left;
    clear:none;
    }
    div #right{
    260px;
    float:left;
    height:240px;
    }
    }
    /*设置浏览器宽度小于480px时的cs样式*/
    @media screen and (max-480px){
    #container{
    margin:auto;
    450px;
    }
    #container>div{
    border:1px solid #aaf;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-radius:12px 12px 0 0;
    background-color:#ffc;
    padding:5px;
    }
    div #left{
    450px;
    height:140px;
    float:left;
    }
    div #main{
    450px;
    height:220px;
    float:left;
    clear:both;
    }
    div #right{
    450px;
    float:left;
    height:160px;
    }
    }
    </style>

    注意写法and与后面的括号有空格。

  • 相关阅读:
    如何阅读一篇论文
    FT232R驱动问题
    无线传感网-定位技术1
    无线传感网中常见路由协议2
    课程总结
    十四周总结以及实验报告
    第十三周总结
    第十二周课程总结
    第十周课程总结
    第九周课程总结&实验报告(七)
  • 原文地址:https://www.cnblogs.com/chjb/p/4444374.html
Copyright © 2011-2022 走看看