自丟網

 找回密碼
 立即注冊
搜索
查看: 146|回復: 2
打印 上一主題 下一主題

@media screen實現屏幕自適應內容案例分析詳解教程

[復制鏈接]

站長QQ:515138

UID
1
丟幣
54
主題
808
帖子
868
在線時間
415 小時
最后登錄
2019-9-22
跳轉到指定樓層
樓主
發表于 2019-7-3 06:54:50 | 查看: 146|回復: 2 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
@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 and ( max-width: 像素值 ) {}教程摘要:響應式布局@media screen and ( max-width: 像素值 ) ...
下一篇:織夢dedecms導航顯示當前樣式currentstyle屬性教程摘要:織夢dedecms導航顯示當前樣式currentstyle屬性教程 ...
樓主熱帖
回復

使用道具 舉報

站長QQ:515138

UID
1
丟幣
54
主題
808
帖子
868
在線時間
415 小時
最后登錄
2019-9-22
沙發
 樓主| 發表于 2019-7-3 06:57:02 | 只看該作者
如果不想要內容顯示就加個CSS樣式:display:none;
回復

使用道具 舉報

站長QQ:515138

UID
1
丟幣
54
主題
808
帖子
868
在線時間
415 小時
最后登錄
2019-9-22
板凳
 樓主| 發表于 2019-7-25 07:32:39 | 只看該作者
回復

使用道具 舉報

網站地圖|百度統計|免責聲明|Archiver|手機版|小黑屋|ZiDiu.Com ( 粵ICP備17166275號 )

GMT+8, 2019-9-23 03:06 , Processed in 0.171875 second(s), 40 queries .

Powered by Discuz!

© Comsenz Inc.

快速回復 返回頂部 返回列表
鸟叔彩金