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">