網站的布局方式，我個人把它們分為兩種，一種是百分百滿屏的，而另外一種就是不滿屏的。不考慮手機端布局。
其中，不滿屏是我們常見的布局，包括網易，騰訊，淘寶都可以稱為不滿屏布局。
通過觀察上面的三張圖，也即是三個網頁，不難發現，他們都有一個共同點都是兩邊留白，而且留白的區域都很大。我們觀察代碼會發現，其實三者都設了一個類似於wrap的div，把內容都包在這個wrap的盒子中，當然最重要的
一點就是這個wrap都是設了寬度的，並且自動居中，這個寬度就是我們網頁內容的寬度大小。而至於這個寬度該設多少才合適呢？我們接着看。首先聲明，我的電腦分辨率是1920*1080的。
騰訊網的wrap寬度是1000px，而網易的呢則是960px，還有淘寶的是1200px。我們都知道，電腦的分辨率除了有1920，還有1366*768等，所以一旦我們的wrap寬度設的太大，有可能會導致在某些分辨率低的電腦上無法正常的顯示網頁內容，
而作為一名前端，這對我們而言是萬萬不行的，這個時候我們可以看一看百度給我們提供的數據。
通過這張圖，我們可以發現，在pc端，基本的分辨率都是在1024以上，所以我們的wrap寬度只要小於1024就行了。嗯，可能有些人會懵逼，所以我特意去把自己電腦的分辨率設到了1024*768，最后我的電腦顯示屏兩邊留出一塊黑乎乎的區域，
中間顯示屏像一個正方形那樣，大家想象一下。然后打開瀏覽器訪問騰訊，網易，網頁的內容完全正常顯示，只是之前在1920分辨率下看到的兩邊的留白，此時已經看不到留白，網頁的內容緊貼着電腦邊框。
當然，有人會問，那這樣的話在1024分辨率的情況下淘寶不就出問題了，因為我剛剛說淘寶的wrap寬度好像是1200。的確淘寶在1920的情況下wrap是1200,同時我看到淘寶好像也並沒有寫媒體查詢之類的在小於
1200的情況下怎么怎么着，但是，我在1024的分辨率情況下訪問淘寶是沒有一點問題的，那么是為什么呢？我沒看淘寶的代碼，嗯看不懂，不過之前看過淘寶手機端的頁面分辨率處理，是通過js動態判斷分辨率然后重新
賦值的，所以此處的話我個人認為淘寶沒有使用媒體查詢，而是用了js動態的去改變這個wrap值。
至此，關於不滿屏布局的內容基本講完，做個總結，以后自己寫這種不滿屏的網頁時就使用1000px去設寬度吧，之前看到有些網站是用1170的，有段時間自己也一直使用1170去寫，現在才發現用1170的寬度沒有考慮到1024分辨率用戶們的體驗。
其實關於這種不滿屏的網頁，我們也可以使用百分比布局，不過用百分比去寫的話，要么你就全部都是百分比布局，要么就只是wrap百分比，如果只是wrap百分比跟直接設值沒多大區別。而全部百分比的話有點不實際，我沒寫過，不過想想覺得太難寫，也沒必要。