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与后面的括号有空格。

  • 相关阅读:
    java的堆和栈
    概率题
    并发复习在回顾
    hashmap和hashtable
    StringBuilder和StringBuffer
    WinSCP 工具
    网络桥接注意问题。
    虚拟机网络设置
    Spring任务计划
    Spring任务执行器(TaskExecutor)
  • 原文地址:https://www.cnblogs.com/chjb/p/4444374.html
Copyright © 2011-2022 走看看