web響應式理解

19寸顯示器：1440x900(16:10)

20寸顯示器：1600x900(16:9)1600x1200(4:3)

21.5寸顯示器：1920x1080(16:9)

22寸顯示器：1680x1050(16:10)1920x1080(16:9)1920x1200(16:10)

23寸顯示器：1920x1080(16:9)1920x1200(16:10)

23.6寸顯示器：1920x1080(16:9)

24寸顯示器：1920x1200(16:10)1920x1080(16:9)

25寸顯示器：1920x1080(16:9)

26寸顯示器：1920x1200(16:10)

27寸顯示器：2560x1440(16:9)

30寸顯示器：2560x1600(16:10)
複製代碼

1、響應式佈局

響應式佈局是什麼？

• 【目標】響應式設計的目標是確保一個頁面在全部終端上（各類尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出使人滿意的效果。
• 【技術】對CSS編寫者而言，在實現上不拘泥於具體手法，但一般是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用
• 分別爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。即：建立多個流體式佈局，分別對應一個屏幕分辨率範圍。能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。

響應式佈局特色

每一個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變。

響應式設計方法

設計方法：媒體查詢+流式佈局。

• 一般使用 @media 媒體查詢
• 和網格系統 (Grid System)
• 配合相對佈局單位進行佈局，
• 實際上就是綜合響應式、流動等上述技術經過 CSS給單一網頁不一樣設備返回不一樣樣式的技術統稱。

響應式設計優缺點

• 【優勢】：適應pc和移動端，若是足夠耐心，效果完美
• 【缺點】
  • （1）媒體查詢是有限的，也就是能夠枚舉出來的，只能適應主流的寬高。
  • （2）要匹配足夠多的屏幕大小，工做量不小，設計也須要多個版本。

代碼舉例

響應式頁面在頭部會加上這一段代碼：

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
複製代碼

2、流式佈局

流式佈局是什麼？

• 流式佈局（Liquid）的特色（也叫"Fluid")
• 是頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。
• 【表明做】柵欄系統（網格系統）。
• 【具體體現】網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。

流式佈局特色

佈局特色：屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示】

流式佈局設計方法

使用%百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width/min-width等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。

流式佈局缺點

這種佈局方式在Web前端開發的早期歷史上，用來應對不一樣尺寸的PC屏幕（那時屏幕尺寸的差別不會太大），在當今的移動端開發也是經常使用佈局方式

• 問題：若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。
• 緣由：由於寬度使用%百分比定義，可是高度和文字大小等大都是用px來固定，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度、文字大小仍是和原來同樣（即，這些東西沒法變得「流式」），顯示很是不協調。

3、自適應佈局

自適應佈局是什麼？

自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。

自適應佈局特色

一、佈局特色：屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化

自適應佈局設計方法

二、設計方法：使用 @media 媒體查詢給不一樣尺寸和介質的設備切換不一樣的樣式。在優秀的響應範圍設計下能夠給適配範圍內的設備最好的體驗，在同一個設備下實際仍是固定的佈局。

自適應佈局優缺點