網頁布局方法
眾所周知，屏幕的尺寸千差萬別。當考慮網頁布局時，主要的考慮因素是:同時，網頁布局的設計和實現要綜合考慮:
雖然屏幕寬度、高度、長寬比千差萬別。而網頁的組織主要是基於寬度適配和高度延伸。
當然，也有壹些網頁需要高度自適應，比如視頻網站的全屏播放。
這裏主要討論的是寬度自適應。高適應也可以類似處理，這裏就不贅述了。
有三種基本布局:靜態布局、丟失布局和靈活布局。
靜態布局
靜態布局使用像素(px)作為頁面設計的單位。在不同的顯示寬度下，頁面元素大小都是固定的。
流式布局
流式布局將頁面寬度設置為百分比。當顯示區域改變時，頁面布局將按比例改變。
流式布局強調適應屏幕寬度的變化。在實際應用中，往往設置為適應寬度，而高度是不變的。當頁面變大時，頁面布局會水平加寬。
彈性布局
靈活布局采用rem/em等相對單位，是相對單位，會隨著屏幕變化而變化。
柔性布局強調在不同條件下，顯示內容除大小不同外，在布局上是壹致的。也就是說，柔性布局的寬度和高度會按比例放大。當頁面被放大時，整個頁面被放大。
假設有兩個屏幕尺寸，壹個是640px，壹個是1080px。640px頁面下有大小為64px的元素。
如果是靜態布局，在640px屏幕下，元素設置為64px。1080px屏幕下，還是64px。元素的大小不變。
如果是流式布局，頁面元素將被設置為640像素屏幕寬度的10%。在1080px屏幕下，10%的長度變成了1080px*10%=108px。元素的大小隨著屏幕而增加。
如果是彈性布局，假設在640px的屏幕下，設置了1rem=16px，那麽64px就是4rem的大小。在1080px的屏幕下，設置1rem=27px，4rem的大小就變成了4*27=108px。元素大小也隨著屏幕而增加。
靜態布局
靜態布局無法響應頁面變化，這既是優點也是缺點。
缺點是屏幕變大了會有空白色區域。當屏幕變小時，需要通過滾動條瀏覽頁面內容。
好處是靜態頁面在任何情況下都可以按照頁面的設計來顯示，適應性的問題最少，工作量最少。
其實目前很多大型網站都是采用靜態布局。正因為適應性廣，所以幾乎不存在什麽適應性問題。任何用戶在任何情況下打開壹個頁面都會顯示相同的頁面。
雖然屏幕尺寸有很多種，但在壹定程度上，屏幕寬度壹般都在壹個範圍內。在應用靜態布局時，放棄適應壹些市場份額較小的小屏幕顯示器是合適的。
流式布局
流式布局多采用寬度適配、固定高度的方式。換句話說，頁面這次被水平拉伸或收縮了。
這樣做的好處是頁面可以適應屏幕的寬度，充分利用屏幕面積，避免大量空白。
缺點是屏幕太寬，頁面會變寬，讓整個頁面顯得不協調。當屏幕過窄時，頁面會被縮小到很小的尺寸，壹些元素的顯示會出現問題。
為了避免這個問題，我們實際上應該。通常，將設置最大和最小裝配寬度。當屏幕超過最大和最小寬度時，頁面將不再適合屏幕。
彈性布局
靈活布局采用寬度和高度同時放大的方法，力求不同屏幕下頁面布局壹致。
靈活布局兼顧了靜態布局和流式布局的優點。壹方面可以適應屏幕的變化，另壹方面也不會造成頁面橫向加寬，造成比例不協調，在壹定程度上保證了頁面布局與原設計的壹致。
然而，這也帶來了新的問題。放大頁面會導致壹些元素被拉伸，尤其是圖片元素，會導致失真。
因此，靈活布局往往采用與流式布局相同的方式，設置最大和最小響應大小，超過它就不會繼續響應。
同時針對圖片失真的問題，可以通過上傳多個尺寸的圖片來解決。不同的屏幕尺寸對應不同的畫面。但是也會帶來大量的維護工作，需要權衡。
由於靜態布局的特點，壹般在以下情況下采用靜態布局:
流式布局更適合有字體的頁面。在流式布局中，雖然文本大小不會改變，但文本段落可以通過更改換行符來改變寬度。
如果屏幕尺寸變化不大，可以考慮采用靈活布局。它可以在不改變頁面布局的情況下進行調整。
事實上，有些頁面采用了幾種不同的布局。比如采用靜態布局的側邊欄，而采用流式布局的主區域。
上面也討論過流式布局和彈性布局不適合尺寸跨度太大的屏幕。所以基本上采用有限的最大最小擬合尺寸，在擬合範圍內，采用流式布局或者彈性布局進行擬合。如果超出適應範圍，就會變成靜態布局，不再響應屏幕的變化。
上面討論的幾個網頁的基本布局，在壹定程度上解決了頁面適配的問題。但隨著顯示終端的發展，出現了平板電腦、移動設備等屏幕。這些設備出現增加了屏幕尺寸的跨度。但是上面討論的幾種網頁布局就是不支持屏幕尺寸跨度過大的情況。
相比之下，自適應布局和響應式布局更能解決屏幕跨度過大的問題。
適應性布局
自適應布局為不同尺寸的屏幕準備多種方案，根據不同的屏幕尺寸確定壹套顯示方案。具體到每個方案，可以使用上述基本的網頁布局進行適配。可以看作是由壹系列基本布局組成的壹套方案。
壹般自適應布局會設計寬屏、窄屏、移動終端等幾種適配方案，然後設置屏幕適配的範圍。顯示時會根據匹配適應範圍的屏幕大小選擇壹組方案進行顯示。
但是，自適應布局通常不會改變頁面的結構。當頁面縮小時，會選擇縮小、替換、隱藏壹些橫向的頁面元素，以達到適配的目的。有壹些常見的治療方法:
響應式布局
響應式布局就是設定壹組方案，通過調整行和列的顯示來適應它們。當屏幕較大時，每個元素顯示在壹行中，當屏幕較小時，它轉換為以列顯示。
響應式布局適應屏幕，因為它需要換行。所以在頁面縮減的過程中，頁面布局會發生變化。頁面縮小時，壹開始會以流布局或柔性布局的形式縮小頁面，直到頁面寬度再也裝不下為止，橫向顯示的元素會改為縱向顯示。
適應性布局
自適應布局需要壹系列頁面布局。因此，設計和實施需要更多的時間。
但是因為它可以針對不同的屏幕設計不同的方案，所以方案是相對獨立的。它的限制較少，自由度較高。
但是，請註意，自適應不是幾個完全不同的方案的組合。總的來說主要部分都是壹樣的。只有壹些水平元素是獨立設計的。
響應式布局
響應式布局只需要壹個頁面布局就可以完成屏幕適配，其實現工作量相對較小。然而，有必要用壹套方案來適應所有的屏幕尺寸。所以設計時要考慮很多因素。
壹般來說，自適應布局適合復雜頁面，響應式布局適合頁面結構簡單的頁面。
因為移動端和PC端的巨大差異，包括屏幕大小，操作方式，都不壹樣。另壹個解決方案是分別設計每壹頁的頁面。
這種方案的優點是每個顯示終端可以根據自身情況自由設計，從而為每個顯示終端專門設計壹種方案。這無疑給設計師和用戶體驗帶來了巨大的好處。
然而，這種方案帶來了設計和實現的雙重工作量。同時，產品投入使用後，需要兩組人對其內容進行維護。
如果妳有以下情況，可以考慮使用移動端和PC端分離的設計:
寫在最後
沒有完美的計劃。根據自身情況選擇才是硬道理。
作為設計人員，不要忘記運營商後期的技術實現、測試、維護的工作量。同時，不要忘記項目後期叠代的難度。總之，選對最重要。
要知道，看似土的靜態布局還是有大量應用的。千萬不要過度設計。
網頁布局方法都有哪些？
壹、靜態布局
在傳統的網頁設計中，網頁上所有元素的大小都是px。
1.布局特征
無論瀏覽器的確切大小如何，頁面的布局始終與第壹次編寫代碼時相同。常規的PC站點是靜態布局的，具有最小寬度，因此，如果寬度小於此值，則顯示滾動條，如果寬度大於此值，則顯示內容居中和背景。這種設計在PC上很常見。
2.設計方法
PC:中心布局，所有樣式使用絕對寬度/高度(px)，設計壹個布局，在屏幕的寬度和高度已經調整，使用水平和垂直滾動條檢查覆蓋部分;移動設備:建立壹個單獨的移動網站，設計壹個單獨的布局，並使用壹個不同的域名，如wap。或者m。
優點:這種布局對設計師和CSS作者來說都是最簡單的，並且沒有兼容性問題。
缺點:很明顯妳不能改變用戶的屏幕尺寸。目前，大多數門戶網站、大多數企業PC廣告網站都采用了這種布局。固定像素大小的web頁面是匹配固定像素大小的顯示的最簡單方法。然而，這種方法不是壹種完全兼容的方式來創建未來的web頁面。我們需要壹些方法來適應未知的設備。
二、流式布局
液體版面(也稱為“流體”)的特點是頁面元素的寬度根據屏幕分辨率進行調整，但總體版面不變。代表性圍欄系統(網格系統)。例如，將主網頁正文的寬度設置為80最小寬度設置為960px。圖像也被類似地處理(寬度：100%，最大寬度通常設置為圖像本身的大小，以防止由於拉伸而失真)。
網絡布局的三種格式？
網頁布局大致可分為左右框架型、上下框架型、綜合框架型、標題正文型、“國”字型、拐角型、封面型、變化型、Flash型。
網頁常見的布局樣式？
在桌面建立壹個index.htm的文件和main.css的文件，當然妳也可以不用main.css的文件，但是為了方便操作，還是建壹個吧。只要把記事本另存為就可以了。做好這兩個文件後我們把網頁的基礎代碼寫上去，並使index文件受到main.css的控制，我們右鍵選擇用記事本打開index文件輸入代碼，並在head裏寫上使它受到main.css控制
3下面我們去main.css寫壹些屬性看看是不是能控制index文件。我希望整個頁面是粉色的，看上去溫馨，我在main.css裏寫上*{background:#FF66FF}看看。我們打開index文件看看是不是在瀏覽器上是不是粉色的。在瀏覽器上是粉色的，表示已經受到css樣式表的控制了。網頁布局結構有哪些？
第壹，“國”字型網頁布局:這個網頁布局適合用在壹些大型網站之中，簡單大氣，這種網頁布局也是目前北京網站建設用在大型網站之中次數最多的類型之壹。
第二，拐角型網頁布局:這個與國字型布局非常相似，不過在形勢上存在壹定察覺，應用起來效果也比較好。
第三，標題正文型網頁布局:這是在北京網站開發中最為簡便的布局類型之壹。
此外，網站制作公司還常常用到包括“T”結構、“三”型以及對稱對比型等。