HTML+CSS編寫靜态網站-39 調整About頁面

最後，我們還需要調整下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">