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

  • 相关阅读:
    ubuntu 16.04 连接无线网络
    linux的内存管理-抛砖引玉
    linux的进程调度-抛砖引玉
    AliOS Things 异步事件框架Yloop
    AliOS Things 云端物联网操作系统
    linux performance tools
    linux进程调度
    linux 内核Lockup机制浅析
    cache和内存屏障
    linux设备模型及实例
  • 原文地址:https://www.cnblogs.com/chjb/p/4444374.html
Copyright © 2011-2022 走看看