• 設為首頁
  • 收藏本站
  • 桌面快捷
  • 手機版
  • 微信
    站長微信 搜索微信號:
    q515138
  • 快捷導航
    打印 上一主題 下一主題

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

    [復制鏈接]
    跳轉到指定樓層
    樓主
    作者: admin(管理員) | 丟幣: 44997 (丟幣充值 | 升級VIP) | 查看: 209| 回復: 2| 發表于 2019-7-3 06:54:50 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
    @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屬性教程 ...
    樓主熱帖
    回復

    使用道具 舉報

    沙發
    admin(管理員) | 丟幣: 44997 (丟幣充值 | 升級VIP) | 查看: 209| 回復: 2| 發表于 2019-7-3 06:57:02 | 只看該作者
    如果不想要內容顯示就加個CSS樣式:display:none;
    回復

    使用道具 舉報

    板凳
    admin(管理員) | 丟幣: 44997 (丟幣充值 | 升級VIP) | 查看: 209| 回復: 2| 發表于 2019-7-25 07:32:39 | 只看該作者
    回復

    使用道具 舉報

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

    快速回復 返回頂部 返回列表
    鸟叔彩金 黑龙江6+1开奖结果查询 大专学汽修赚钱吗 福建时时彩公式规则 今天湖北30选5开奖 极速十一选五遗漏号码查询 世界杯半全场 领航团队赚钱手册 青海快3今天开奖号码 南昌麻将微信二维码群 七星彩走势图幸运之门 甘肃体彩十一选五走势图 上传网易云音乐 赚钱 中国福利彩票3d 浙江省十一选五开奖走势 自动赚钱机器人198元 山西天星晋中麻将下载安装