响应式布局

        /*媒介查询*/
        @media screen and (min-width: 1000px){   /*当屏幕大小最大为多少时屏幕的颜色，and后面要加空格*/
            li{
                width: 200px;
                height: 200px;
                outline: 1px solid  black;
                text-align: center;
                line-height: 200px;
                float: left;
                list-style: none;
            }
            ul{
                width: 400px;
                height: 600px;
                outline: 1px solid black;
            }
        }
        @media screen and (max-width: 900px){   /*当屏幕大小最大为多少时屏幕的颜色，and后面要加空格*/ 
                li{
                width: 300px;
                height: 100px;
                outline: 1px solid  black;
                text-align: center;
                line-height: 100px;
                float: left;
                list-style: none;
            }
            ul{
                width: 300px;
                height: 600px;
                outline: 1px solid black;
            }
            
        }
    </style>
    <!-- 当浏览器大小为1000px时加载下面的css文件 -->
    <link rel="stylesheet" type="text/css" href="golabal.css" media="screen and (max-with:1000px;)" >
    <!-- 当浏览器大小为600px时加载下面的css文件 -->
    <link rel="stylesheet" type="text/css" href="golabal.css" media="screen and (max-with:600px;)" >
    
- 图层（z-index）

    z-index:值；绝对定位后，图层值越大层数越靠上。
    
- display:none;（设置后，从视图中消失，但不保存物理空间）和 visibility:hidden;（设置后，从视图中消失，但却保存了物理空间）

响应式布局

原文：http://www.cnblogs.com/zd1122/p/7469443.html