幾乎完全參考：掘金 web網頁布局的主要方式
即傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。
不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫**時的布局來顯示。常規的pc的**都是靜態（定寬度）布局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
pc：居中布局，所有樣式使用絕對寬度/高度(px)，設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 移動裝置：另外建立移動**，單獨設計乙個布局，使用不同的網域名稱如wap.或m.。
優點：這種布局方式對設計師和css編寫者來說都是最簡單的，亦沒有相容性問題。
缺點：顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。當前，大部分門戶**、大部分企業的pc宣傳站點都採用了這種布局方式。固定畫素尺寸的網頁是匹配固定畫素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的製作方法，我們需要一些適應未知裝置的方法。
流式布局（liquid）的特點（也叫"fluid") 是頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。也作類似處理（width:100%, max-width一般設定為本身的尺寸，防止被拉伸而失真）。
螢幕解析度變化時，頁面裡元素的大小會變化而但布局不變。【這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
這種布局方式在web前端開發的早期歷史上，用來應對不同尺寸的pc螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調
自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局
隨著css3出現了**查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保乙個頁面在所有終端上（各種尺寸的pc、手機、手錶、冰箱的web瀏覽器等等）都能顯示出令人滿意的效果，對css編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配**查詢技術使用。——分別為不同的螢幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著視窗調整而自動適配。即：建立多個流體式布局，分別對應乙個螢幕解析度範圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
響應式幾乎已經成為優秀頁面布局的標準。
每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變。
**查詢+流式布局。通常使用 @media **查詢 和網格系統 (grid system) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 css 給單一網頁不同裝置返回不同樣式的技術統稱。
優點：適應pc和移動端，如果足夠耐心，效果完美。
缺點：（1）**查詢是有限的，也就是可以列舉出來的，只能適應主流的寬高。（2）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
響應式頁面在頭部會加上這一段**：
## 五、彈性布局（rem/em布局）
1、rem/em區別：rem是相對於html元素的font-size大小而言的，而em是相對於其父元素。
3、這類布局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式布局」或「靜態/固定布局」）。早期瀏覽器不支援整個頁面按比例縮放，僅支援網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。
4、瀏覽器的預設字型高度一般為16px，即1em:16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，css編寫者常常將頁面跟節點字型設為62.5%，比如選擇用rem控制字型時，先需要設定根節點html的字型大小，因為瀏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。
5、用em/rem定義尺寸的另乙個好處是更能適應縮排/以字型單位padding或margin／瀏覽器設定字型尺寸等情況（因為em/rem相對於字型大小，會同步改變）。例如：p。
6、使用rem單位的彈性布局在移動端也很受歡迎。
7、其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結底是rem單位對於（根據螢幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的單位，可以實現完美的流式布局（高度和文字大小都可以變得「流式」），彈性布局就不再必要了。
css3中引入了乙個新的單位vw/vh，與檢視視窗有關，vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。從對比中我們可以發現，vw單位與百分比類似，單確有區別，前面我們介紹了百分比單位的換算困難，這裡的vw更像」理想的百分比單位」。任意層級元素，在使用vw單位的情況下，1vw都等於檢視寬度的百分之一
同樣的，如果要將px換算成vw單位，很簡單，只要確定檢視的視窗大小（布局視口），如果我們將布局視口設定成解析度大小，比如對於iphone6/7 375*667的解析度，那麼px可以通過如下方式換算成vw：
1px = （1
/375）*
100 vw
postcss-px-to-viewport的預設引數為：
var defaults =
;
可以在 檢視各個版本的瀏覽器對vw單位的支援性。從上圖我們發現，絕大多數的瀏覽器支援vw單位，但是ie11並支援，因此vw單位有一定的侷限性。
1.如果只做pc端，那麼靜態布局（定寬度）是最好的選擇；
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定；
3.如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據**查詢做不同的布局。
web頁面布局思想
網頁可以看成由乙個個 盒子 組成，如圖 盒子模型的相關屬性 margin 外邊距 邊界 border 邊框 padding 內邊距 填充 我們看圖理解一下各屬性作用 盒模型的層次關係 我們通過乙個經典的盒模型3d立體結構圖來理解，如圖 從上往下看，層次關係如下 第1層 盒子的邊框 border 第2...
web頁面總結
經過半個月的奮鬥，善良公社專案書畫院前台的web介面竣工了。雖然介面並不是很完美，說明學習的地方還有很多。在介面部分需要的技術 div css j ascript ajax html和一般處理程式等等。頁面布局對於使用者來說是最直觀的。使用者雖然不懂技術問題，但對於介面是否簡潔美觀，人性化，有沒有功...
Web頁面該如何布局
幾乎所有的web開發人員都使用html編輯過網頁，也知道htm元素具體是什麼效果，儘管如此，但是很多時候，開發人員需要的頁面布局和頁面效果卻依然不是按照自己想要的效果出現。之所以產生這樣的問題很大的原因是開發人員在了解自己或客戶需要的效果之後，就會受這些頁面效果的影響失去考慮頁面結構的能力。我們很多...