zoukankan      html  css  js  c++  java
  • @media自适应宽度

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <meta name="viewport" content="width=device-width, initial-scale=1" />
     6 <title>css3-media-queries-demo</title>
     7 <style>
     8 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
     9     padding: 0;
    10     margin: 0;
    11 }
    12 .content{
    13     zoom:1;
    14 }
    15 .content:after{
    16     content: ".";
    17     display: block;
    18     height: 0;
    19     clear: both;
    20     visibility: hidden; 
    21 }
    22 .leftBox, .rightBox{
    23     float: left;
    24     width: 20%;
    25     height: 500px;
    26     margin: 5px;
    27     background: #ffccf7;
    28     display: inline;
    29     -webkit-transition: width 1s ease;
    30     -moz-transition: width 1s ease;
    31     -o-transition: width 1s ease;
    32     -ms-transition: width 2s ease;
    33     transition: width 1s ease;
    34 }
    35 .middleBox{
    36     float: left;
    37     width: 50%;
    38     height: 800px;
    39     margin: 5px;
    40     background: #b1fffc;
    41     display: inline;
    42     -webkit-transition: width 1s ease;
    43     -moz-transition: width 1s ease;
    44     -o-transition: width 1s ease;
    45     -ms-transition: width 1s ease;
    46     transition: width 1s ease;
    47 }
    48 .rightBox{
    49     background: #fffab1;
    50 }
    51 @media only screen and (min- 1024px){
    52     .content{
    53             width: 1000px;
    54             margin: auto
    55         }
    56 }
    57 @media only screen and (min- 400px) and (max- 1024px){
    58     .rightBox{
    59         width: 0;
    60     }
    61     .leftBox{ width: 30%}
    62     .middleBox{ width: 65%}
    63 }
    64 @media only screen and (max- 400px){
    65     .leftBox, .rightBox, .middleBox{ 
    66         width: 98%;
    67         height: 200px;
    68     }
    69 }
    70 </style>
    71 </head>
    72 
    73 <body>
    74 <div class="content">
    75   <div class="leftBox"></div>
    76   <div class="middleBox"></div>
    77   <div class="rightBox"></div>
    78 </div>
    79 </body>
    80 </html>
  • 相关阅读:
    164 Maximum Gap 最大间距
    162 Find Peak Element 寻找峰值
    160 Intersection of Two Linked Lists 相交链表
    155 Min Stack 最小栈
    154 Find Minimum in Rotated Sorted Array II
    153 Find Minimum in Rotated Sorted Array 旋转数组的最小值
    152 Maximum Product Subarray 乘积最大子序列
    151 Reverse Words in a String 翻转字符串里的单词
    bzoj3994: [SDOI2015]约数个数和
    bzoj 4590: [Shoi2015]自动刷题机
  • 原文地址:https://www.cnblogs.com/jessical626/p/5940050.html
Copyright © 2011-2022 走看看