@media screen实现屏幕自适应内容案例分析详解教程

@media screen实现屏幕自适应内容案例分析详解教程


代码如下:

  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-width: 1024px){
  52.        .content{
  53.                width: 1000px;
  54.                margin: auto
  55.            }
  56.    }
  57.    @media only screen and (min-width: 400px) and (max-width: 1024px){
  58.        .rightBox{
  59.            width: 0;
  60.        }
  61.        .leftBox{ width: 30%}
  62.        .middleBox{ width: 65%}
  63.    }
  64.    @media only screen and (max-width: 400px){
  65.        .leftBox, .rightBox, .middleBox{
  66.            width: 98%;
  67.            height: 200px;
  68.        }
  69.    }
  70.    </style>
  71.    </head>
  72.    <body>
  73.    <div class=”content”>
  74.      <div class=”leftBox”>我是左边内容</div>
  75.      <div class=”middleBox”>我是中间内容</div>
  76.      <div class=”rightBox”>我是右边内容</div>
  77.    </div>
  78.    </body>
  79.    </html>

复制代码

运行效果:


css自适应案例分析.png (20.33 KB, 下载次数: 17)

下载附件

@media screen实现屏幕自适应内容案例分析详解教程

2019-7-3 06:54 上传

自适应css案例教程.png (17.82 KB, 下载次数: 11)

下载附件

@media screen实现屏幕自适应内容案例分析详解教程

2019-7-3 06:54 上传

自适应css教程.png (18.14 KB, 下载次数: 10)

下载附件

@media screen实现屏幕自适应内容案例分析详解教程

2019-7-3 06:54 上传