視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
這節課。我們希望讓Vedio頁面對不僅只適配移動佈局，我們來讓它適應更大的佈局。
所以。首先，我們先刪除之前的背景樣式測試程式碼。
| @media screen and (min-width:480px){
}
@media screen and (min-width:660px){
} |
現在，我們來新增第一個媒體查詢。我們想要做的第一件事是通過將兩個元素並排浮動來建立一個兩列布局，就像我們之前建立的畫冊一樣。
所以這裡，我要建立兩個新的ID，然後將它應用於我們的HTML。第一個將是我們的主列，主列是兩列中的較大的一列。
首先，我將切換到main.css複製一個多行註釋。然後我會貼上在這裡。這裡我把它改為“TWO COLUMN LAYOUT”：
| @media screen and (min-width:480px){
/* **************************************
TWO COLUMN LAYOUT
************************************** */
} |
然後，我要使用ID:primary，這裡我們還沒有把它新增到我們的HTML，不急，我們們先把樣式寫完，然後再新增到HTML中，那麼接著。我會新增兩個花括號。然後，把width設定為50％，因為我希望佔用螢幕寬度的一半。這是左列。然後把float設為left。
| #primary{
width:50%;
float:left;
} |
接下來，我們將建立第二列。所以我們來建立一個名為secondary的ID。我們將寬度設定為40％，這不是主列，它是輔助列。我們不希望它佔用太多的空間。然後，我們要讓它漂浮在右邊，float:right。
| #secondary{
width:40%;
float:right;
} |
現在，我們在contact頁面上使用這些ID。還記得當我們新增兩個section嗎？那麼現在，我們要將這些section分成兩列。所以，在我們的第一個section，我們來說id是primary的。然後我們的第二個section， id 為secondary。
| <section id = "primary">
<h3>General information</h3>
<p>虛幻大學希望能夠讓每個人享受程式設計的樂趣，沒有程式設計經驗的人能夠通過學習找到工作，有程式設計經驗的人能夠通過學習全面自己的技術。如果你有任何問題，請隨時與我聯絡！</p>
</section>
<section id = "secondary"> |
儲存，切換到瀏覽器，重新整理頁面：
首先，背景顏色消失了。然後，如果我們轉到我們的Contact頁面，您將看到我們現在有兩列。如果我們將瀏覽器的寬度縮到480px以下，你看，又變回到以前的樣式了。
因為在移動裝置是高高瘦瘦的，這使得在頁面上下滾動變得非常容易。那麼，桌上型電腦瀏覽器在這種情況下肯定也可以很容易地滾動，但是變成2列之後就可以更充分的利用頁面的空間了。所以，這就是響應式網站的設計方式，
接下來，我們應該對我們的Vedio頁面進行一些類似的調整。現在，我們已經有一個兩列的佈局，但是將它擴充套件到三列將會更加完美。
所以我們來跳入我們的CSS。我要在這裡複製多行註釋，然後，貼上到新的一行。把它改為PAGE:VEDIO
| /* **************************************
PAGE:VEDIO
************************************** */ |
這裡，因為我們要將畫冊設定為3列，畫冊是通過列表項建立的，又因為元素是浮動的。所以在不改變邊距的情況下，我們只需要改變寬度。所以我們將寬度設定為28.333%。
| #gallery li{
width:28.3333%;
} |
如果我們現在切換到瀏覽器並重新整理，一切看起來都很好。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/vedio-layout/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/vedio-layout/