網頁的布局方式本質上就是去處理窗口寬度與網頁內容的關系，用戶會使用瀏覽器打開不同尺寸的窗口，所以網頁內容就需要根據已有的窗口去布局。下面，藍橙視覺就給大家分享一下網頁常用的布局方式，為大家網站頁面設計提供一個參考。
1、固定布局
固定布局是一種最為簡單的方式，它的設計邏輯是將頁面當中的內容 “寫死固定” 在屏幕上，內容不會隨著本身窗口寬度進行改變，所有元素都使用px作為基礎單位。當然在固定布局當中，窗口大小與頁面內容會存在兩種基本關系：窗口過大則將頁面元素進行居中，窗口過小則展示橫向滾動條，固定布局的好處是這種方式相對簡單，只需將頁面設計好即可，不會存在太多兼容性的問題。
2、流式布局
流式布局是最基礎的變化布局，它的設計邏輯是將頁面當中的元素設計成可以流動的 “水”，通過在頁面，設計不同的“杯子”容器來裝下頁面內容。這里的“水”一般指的是 文字、圖標、以及一些頁面重復出現(xiàn)的元素。而杯子通常是我們設計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度等等...因為“杯子”的限制，也就導致水會根據杯子的寬度進行延展流動，進而形成流式布局。
3、自適應布局
自適應布局是將差別較大的屏幕尺寸，去創(chuàng)建多個不同的設計稿，每一個設計稿去對應 一個用戶實際的尺寸范圍，改變屏幕分辨率就可以去切換不同的設計方案。自適應是使用多套代碼去對應多個頁面，并且都是在業(yè)務非常復雜的情況下進行使用，在國內當中最常使用便是桌面端與移動端的產品。
4、響應式布局
響應式布局是確保一個頁面當中所有的設備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進行產生的一種技術方案。它更像是流式布局與自適應布局的結合，它能夠通過對屏幕尺寸的快速響應，進而對頁面的內容進行更為細致的變化。通俗一點來說就是通過一套代碼去實現(xiàn)多個頁面，并且將多個頁面的內容進行細化，進而能夠快速適配多個設備。
以上就是本次為大家分享的網頁UI設計形式，不同的頁面設計有著不同的特點，在網頁設計費用上也會有所不同，企業(yè)可根據自身的網站定位和實際的使用需求，挑選一種最合適的網頁布局方式。
藍橙互動
