常見的網頁布局分析

**的布局方式，我個人把它們分為兩種，一種是百分百滿屏的，而另外一種就是不滿屏的。不考慮手機端布局。

通過觀察上面的三張圖，也即是三個網頁，不難發現，他們都有乙個共同點都是兩邊留白，而且留白的區域都很大。我們觀察**會發現，其實三者都設了乙個類似於wrap的div，把內容都包在這個wrap的盒子中，當然最重要的

一點就是這個wrap都是設了寬度的，並且自動居中，這個寬度就是我們網頁內容的寬度大小。而至於這個寬度該設多少才合適呢？我們接著看。首先宣告，我的電腦解析度是1920*1080的。

通過這張圖，我們可以發現，在pc端，基本的解析度都是在1024以上，所以我們的wrap寬度只要小於1024就行了。嗯，可能有些人會懵逼，所以我特意去把自己電腦的解析度設到了1024*768，最後我的電腦顯示屏兩邊留出一塊黑乎乎的區域，

當然，有人會問，那這樣的話在1024解析度的情況下**不就出問題了，因為我剛剛說**的wrap寬度好像是1200。的確**在1920的情況下wrap是1200,同時我看到**好像也並沒有寫**查詢之類的在小於

1200的情況下怎麼怎麼著，但是，我在1024的解析度情況下訪問**是沒有一點問題的，那麼是為什麼呢？我沒看**的**，嗯看不懂，不過之前看過**手機端的頁面解析度處理，是通過js動態判斷解析度然後重新

賦值的，所以此處的話我個人認為**沒有使用**查詢，而是用了js動態的去改變這個wrap值。

至此，關於不滿屏布局的內容基本講完，做個總結，以後自己寫這種不滿屏的網頁時就使用1000px去設寬度吧，之前看到有些**是用1170的，有段時間自己也一直使用1170去寫，現在才發現用1170的寬度沒有考慮到1024解析度使用者們的體驗。

其實關於這種不滿屏的網頁，我們也可以使用百分比布局，不過用百分比去寫的話，要麼你就全部都是百分比布局，要麼就只是wrap百分比，如果只是wrap百分比跟直接設值沒多大區別。而全部百分比的話有點不實際，我沒寫過，不過想想覺得太難寫，也沒必要。