zoukankan      html  css  js  c++  java
  • 响应式布局样例

      

    <!DOCTYPE html>
    <!-- saved from url=(0060)http://webdesignerwall.com/demo/responsive-design/index.html -->
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    
    <!-- viewport meta to reset iPhone inital scale -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Demo: Responsive Design in 3 Steps</title>
    
    <!-- css3-mediaqueries.js for IE8 or older -->
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    
    <style type="text/css">
    
    body {
        font: 1em/150% Arial, Helvetica, sans-serif;
    }
    a {
        color: #669;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    h1 {
        font: bold 36px/100% Arial, Helvetica, sans-serif;
    }
    
    /************************************************************************************
    STRUCTURE
    *************************************************************************************/
    #pagewrap {
        padding: 5px;
        width: 960px;
        margin: 20px auto;
    }
    #header {
        height: 180px;
    }
    #content {
        width: 600px;
        float: left;
    }
    #sidebar {
        width: 300px;
        float: right;
    }
    #footer {
        clear: both;
    }
    
    /************************************************************************************
    MEDIA QUERIES
    *************************************************************************************/
    /* for 980px or less */
    @media screen and (max- 980px) {
        
        #pagewrap {
            width: 94%;
        }
        #content {
            width: 65%;
        }
        #sidebar {
            width: 30%;
        }
    
    }
    
    /* for 700px or less */
    @media screen and (max- 700px) {
    
        #content {
            width: auto;
            float: none;
        }
        #sidebar {
            width: auto;
            float: none;
        }
    
    }
    
    /* for 480px or less */
    @media screen and (max- 480px) {
    
        #header {
            height: auto;
        }
        h1 {
            font-size: 24px;
        }
        #sidebar {
            display: none;
        }
    
    }
    
    /* border & guideline (you can ignore these) */
    #content {
        background: #f8f8f8;
    }
    #sidebar {
        background: #f0efef;
    }
    #header, #content, #sidebar {
        margin-bottom: 5px;
    }
    #pagewrap, #header, #content, #sidebar, #footer {
        border: solid 1px #ccc;
    }
    </style>
    
    </head>
    
    <body>
        <div id="pagewrap">
        
            <div id="header">
                <h1>Header</h1>
                <p>Tutorial by Web Designer Wall(read related article)</p>
            </div>
    
            <div id="content">
                <h2>Content</h2>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
                <p>text</p>
            </div>
    
            <div id="sidebar">
                <h3>Sidebar</h3>
                <p>text</p>
                <p>text</p>
            </div>
            
            <div id="footer">
                <h4>Footer</h4>
            </div>
    
        </div>
    </body>
    </html>

  • 相关阅读:
    java.lang.ClassCastException: android.widget.ImageButton异常处理
    24 Json、序列化
    27 window
    17 方法
    19 原型
    18 函数上下文
    16 构造方法
    15 对象
    13 高阶函数map,filter
    14 闭包
  • 原文地址:https://www.cnblogs.com/littlewriter/p/6671979.html
Copyright © 2011-2022 走看看