給頁面元素設定固定的寬度和高度，單位用px，當視窗縮小，會出現滾動條，拉動滾動條顯示被遮擋內容。針對不同解析度的手機端，分別寫不同的樣式檔案。例如：瀏覽器視窗是1000px，那麼最小的寬度是900px或其他px,只要瀏覽器縮小過這個最小值就不會自動化的調整。
1.特點
不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫**時的布局來顯示。常規的pc的**都是靜態（定寬度）布局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2.設計方法
居中布局，所有樣式使用絕對寬度/高度(px)，設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分。
3.缺點
顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現，毫無靈活性可言，目前已逐漸被淘汰。
建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍，使用@media**查詢技術，改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變。
1.特點
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2.設計方法
使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
流式布局與固定寬度布局基本不同點就在於對**尺寸的側量單位不同。固定寬度布局使用的是畫素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。換句話說，通過設定百分比，我們不需要考慮裝置尺寸或者螢幕寬度大小了，可以為每種情形找到一種可行的方案，應為你的設計尺寸將適應所有的裝置尺寸。流布局與**查詢和優化樣式技術密切相關。
1.特點
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化，靈活性更高，可適用於其他三種**布局
2.設計方法
使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。
採用自適應布局和流式布局的綜合方式，為不同螢幕解析度範圍建立流式布局，響應式**要普遍適應市面上各類螢幕，開發難度和工作量都是非常大的，開發**自然比普通**高。
1.特點
每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變。
2.設計方法
**查詢+流式布局。使用@media**查詢和網格系統配合相對布局單位進行布局，就是綜合響應式、流動等上述技術通過 css 給單一網頁不同裝置返回不同樣式的技術統稱。
3.缺點
**查詢是有限的，也就是可以列舉出來的，只能適應主流的寬高。要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
靜態布局 自適應布局 流式布局與響應式布局的區別
這兩天，看到別人在群裡問布局特點，發現自己對這方法還是有點模糊，老是忘，於是上網查了下這方面內容，自己總結寫出了，如果有錯誤地方，敬請指正。意思就是只是針對某個螢幕下設計的網頁，當螢幕大小改變時，頁面布局不會發生變化，就像經常所看到的滾動條。特點是分別為不同的螢幕設定布局格式，當螢幕大小改變時，會出...
HTML網頁布局 靜態 自適應 流式 響應式
靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.自適應布局 adaptive layout 自適應布局 adaptive 的特點是分別為...
自適應布局與響應式布局
什麼是響應式布局 響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。什麼是自適應式布局 自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新...