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

  • 相关阅读:
    Codeforces Round #394 (Div. 2) A. Dasha and Stairs
    HDU 1410 PK武林盟主
    HDU 3362 Fix(状压dp)
    P678-vect2.cpp
    Qt5获取本机网络信息
    Qt5标准文件对话框类
    nRF52832无法加载协议栈文件
    Debug记录(1)
    大小端模式
    nRF52832的SAADC
  • 原文地址:https://www.cnblogs.com/chjb/p/4444374.html
Copyright © 2011-2022 走看看