視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
最後，我們還需要調整下About頁面，我們的排版原則是希望能夠更充分的利用瀏覽器視窗的空間。
所以同樣，我們把它改為兩列的佈局，就像我們的Contact頁面一樣。但是，和Contact頁面不同的是，Contact是由2個Section構成的，而About只有一個，所以我們可以通過將網站Logo浮動到左側來實現，並新增一些margin。
所以讓我們回到我們的CSS。首先，我要複製這個多行註釋，。然後把註釋改為About。然後，我們將選擇我們的profile-photo，我們將其浮動到左邊：float：left。然後我們需要稍微調整邊距，因為這是浮動元素。所以margin:0，5％，80畫素和0。我新增了5％的右邊距來分隔文字，底部有80個畫素，以防止文字包圍到影像的底部：
| /* **************************************
PAGE ABOUT
************************************** */
.profile-photo{
float:left;
margin:0 5% 80px 0;
} |
所以讓我們儲存並重新整理瀏覽器：
你看，現在是漂亮的兩列布局。如果我將頁面調寬，看起來不錯。如果我調窄，我們的兩列布局將成為移動裝置的單列。和我們預期的一樣。
接下來，我們需要做最後一件事情。我們需要在我們的三個HTML頁面中新增視口元標記。它將允許我們在移動裝置上控制瀏覽器視窗的大小，這樣我們的佈局就可以根據裝置螢幕的大小而改變，而不是每次都需要訪問者在頁面上進行平移和縮放，來找到最合適的大小。
所以我要轉到index.html。然後在responsive.css之後，我們說meta元素，name屬性設定為視口。然後，content屬性設為：width等於device-width，然後initial-scale等於1.0。最後，關閉標籤。
| <link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
現在，我們儲存，複製該行，然後我將其貼上到About頁面和Contact頁面，並儲存。
如果我們不新增這行程式碼，那麼在移動裝置上的預設會以桌面佈局呈現。我們希望移動佈局會預設的在移動裝置上呈現。因此，這個元標記的name屬性中的視口應為content屬性設定的值。在這種情況下，content屬性表示，我們的網站的寬度應該被縮放為當前裝置螢幕的寬度。初始比例應設定為1.0，也就是和螢幕一致。
所以，你可以看到我們的網站是一個完全響應式的網站。
總結來說，如果你有一個移動佈局的網站，您只需要編寫一點額外的css程式碼，就可以相當快將它變為一個桌面版的網站。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/adjust-about-page/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/adjust-about-page/