自適應布局的特點是分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。
1、布局特點：螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法：使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。
流式布局（liquid）的特點（也叫"fluid") 是頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。也作類似處理（width:100%, max-width一般設定為本身的尺寸，防止被拉伸而失真）。
1、布局特點：螢幕解析度變化時，頁面裡元素的大小會變化而但布局不變。【這就導致如果螢幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
這種布局方式在web前端開發的早期歷史上，用來應對不同尺寸的pc螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。
彈性布局，又稱「flex布局」，是由w3c於2023年推出的一種布局方式。可以簡便、完整、響應式地實現各種頁面布局。而且已經得到所有主流瀏覽器的支援。
了解兩個基本概念，接下來會頻繁提到：
容器： 需要新增彈性布局的父元素；
專案： 彈性布局容器中的每乙個子元素，稱為專案；
了解兩個基本方向，這個牽扯到彈性布局的使用：
主軸： 在彈性布局中，我們會通過屬性規定水平/垂直方向為主軸；
交叉軸： 與主軸垂直的另一方向，稱為交叉軸。
** em、rem、meta標籤的基本概念**
em 是乙個布局的長度單位，當前物件內文字的字型大小的相對單位，也就是說相對於當前元素的font-size。
rem 是（根）字型大小相對單位，也就是說跟當前元素的font-size沒有關係，而是跟整個body的font-size有關係。
meta標籤，我們可以指定瀏覽器的適口，適口就是可以看見的區域
流式布局和響應式布局
常見的面試題會讓你聊一聊流式布局與響應式布局，我還沒遇到過直接問他倆區別的面試官，都是根據我的專案 裡面有用到流式布局 響應式布局 圍繞這兩點感覺網上大部分部落格都長得差不多，那我就用自己粗淺的理解說一下由此展開的一點問題吧。說起流式布局首先就要提到的是老掉牙的固定布局 瀏覽器大小不影響內部元素大小...
響應式布局與流式布局
width 控制viewport的大小 height 和width相對應 initial scale 初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。maximum scale 允許使用者縮放到的最大比例。minimum scale 允許使用者縮放到的最小比例。user scalable...
理解流式布局和響應式布局
流式布局在css2時代就有，主要是靠百分比 進行排版，可以在不同解析度下顯示 相同的版式。流式布局 網頁中主要的劃分區域的尺寸使用百分數 搭配min max 屬性使用 例如，設定網頁主體的寬度為80 min width為960px。也作類似處理 width 100 max width一般設定為本身的...