三步實現響應式網頁佈局

時間 2019-12-09

標籤三步實現響應網頁佈局欄目 HTML 简体版

原文原文鏈接

第一步：meta標籤css

　　大多數瀏覽器將HTML頁面放大爲寬的視圖（viweport）以符合屏幕分辨率。你能夠使用視圖的meta標籤來進行重置。css3

　　下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。瀏覽器

　　在<head>標籤里加入這個meta標籤。less

1 <meta name="viweport" content="width=device-width, initial-scale=1.0">

　　IE8或者更早的瀏覽器並不支持Media Query。你能夠使用media-query.js或者respond.js來爲IE添加Media Query支持。ide

<!--[if It IE 9]-->
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!--[endif]-->

第二部：HTML結構svn

　　在這個例子裏，我有一個包括頭部、內容、側邊欄和頁腳的基本頁面佈局。頭部有固定的高度180px，內容容器是600px而側邊欄是300px。佈局

第三部：媒介查詢-Media Queries字體

　　CSS3 Media Query - 媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。google

　　當視圖寬度小於等於980px時，以下規則會生效。基本上，我會將全部的容器寬度從像素值設置爲百分比以使得容器大小自適應。spa

 1 /*for 980px or less*/
 2 @media screen and (max-width: 980px){
 3     #pagewrap{
 4           width: 94%;
 5     }  
 6     #content{
 7           width: 65%;
 8     }  
 9     #sidebar{
10           width: 30%;
11     }  
12 }

　　而後爲小於等於700px的視圖指定#content和#sidebar的寬度爲自適應而且清楚浮動，使得這些容器按全寬度顯示。

/*for 700px or less*/
@media screen and (max-width: 700px){
    #content{
        width:auto;
        float:none;
    }
    #siderbar{
        width:auto;
        float:none;
    }
}

　　對於小於等於480px的狀況，將#header元素的高度設置爲自適應，將h1的字體大小修改成24px並隱藏側邊欄。

/*for 480px or less*/
@media screen and (max-width: 480px){
    #header{
            height:auto;
    }
    h1{
            font-size: 24px;  
    }
    #siderbar{
            display:none;  
    }    
}