请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
查看3818 | 回复2 | 2019-7-3 06:54 | 显示全部楼层 |阅读模式
@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>
复制代码

运行效果:

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

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


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

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


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

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

admin | 2019-7-3 06:57 | 显示全部楼层
如果不想要内容显示就加个CSS样式:display:none;
admin | 2019-7-25 07:32 | 显示全部楼层
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24