zoukankan      html  css  js  c++  java
  • Media Queries 自适应布局展示

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Media Queries</title>
        <style>

    body{ margin: 20px 0; } #conterbody{ 960px; margin:auto; } p#top{ 960px; background-color: #982; line-height:200px; } div#left{ /*控制center和 left*/ 740px; float: left; background-color: #909090; } p{ line-height:600px; text-align: center; font-size: 2em; margin: 0 0 20px 0; color: #fff; } p#left-z{ 200px; float: left; background-color: #0064ff; } p#left-y{ 520px; float: right; background-color: #547; } p#right{ 200px; float:right; background-color: #982; } /*最大1000px时候*****************************************************/ @media screen and (min- 1000px){ #conterbody{ 1000px; } p#top{ 1000px; } p#left{ 780px; float: left; } div#left-z{ 200px; float: left; } p#left-y{ 520px; float: right; } p#right{ 200px; float:right; } } /*最大不超过999px 最小不小于640px**************************************/ @media screen and (min- 640px) and (max- 999px){ div#conterbody{ 640px; } p#top{ 100%; } div#left{ 640px; float: left; } p{ line-height: 430px; /*变化后高度缩小*/ } p#left-z{ 200px; float: left; } p#left-y{ 420px;/*640-200-20=420*/ float: right; } p#right{ 100%; line-height: 150px; } } /*最大不超过639px **************************************************/ @media screen and (max-639px){ div#conterbody{ 100%; } p#top{ 100%; } div#left{ 100%; } p{ line-height: 300px; /*变化后高度缩小*/ } p#left-z{ 100%; } p#left-y{ 100%; } p#right{ 100%; line-height: 200px; } } </style> </head> <body> <div id="conterbody">
    <p id="top">Top</p>
        <div id="left">
            <p id="left-z">Left</p>
            <p id="left-y">Conter</p>
        </div>
        <p id="right">right</p>
    </div>
    </body>
    </html>


    /*Safari 版本5.1。7(7534.57.2)支持
    chrome 版本26.0.1410.64  m 支持
    opera 版本12.15 支持
    fireFox 版本21.0 支持
    IE10 版本10.0.92000.16580  支持*/


    解决IE不支持<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    如果有什么些的不对,请各位及时指出,在下这里感谢了!!!
  • 相关阅读:
    [javase学习笔记]-8.7 静态代码块
    QT5.6 编译SQLServer驱动
    mnesia怎样改动表结构
    UVA 1541
    Topcoder SRM625 题解
    android自己定义渐变进度条
    显示vim当前颜色主题
    启动vim不加载.vimrc
    为ubuntu添加多媒体以及flash等等常用包
    linux c:关联变量的双for循环
  • 原文地址:https://www.cnblogs.com/qingqingzou-143/p/6118730.html
Copyright © 2011-2022 走看看