即傳統Web設計,網頁上的全部元素的尺寸一概使用px做爲單位。css
無論瀏覽器尺寸具體是多少,網頁佈局始終按照最初寫代碼時的佈局來顯示。常規的pc的網站都是靜態(定寬度)佈局的,也就是設置了min-width,這樣的話,若是小於這個寬度就會出現滾動條,若是大於這個寬度則內容居中外加背景,這種設計常見於pc端。html
PC:居中佈局,全部樣式使用絕對寬度/高度(px),設計一個Layout,在屏幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分;
移動設備:另外創建移動網站,單獨設計一個佈局,使用不一樣的域名如wap.或m.。前端
優勢:這種佈局方式對設計師和CSS編寫者來講都是最簡單的,亦沒有兼容性問題。瀏覽器
缺點:顯而易見,即不能根據用戶的屏幕尺寸作出不一樣的表現。當前,大部分門戶網站、大部分企業的PC宣傳站點都採用了這種佈局方式。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種徹底兼容將來網頁的製做方法,咱們須要一些適應未知設備的方法。app
流式佈局(Liquid)的特色(也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整,但總體佈局不變。表明做柵欄系統(網格系統)。佈局
網頁中主要的劃分區域的尺寸使用百分數(搭配min-、max-屬性使用),例如,設置網頁主體的寬度爲80%,min-width爲960px。圖片也做相似處理(width:100%, max-width通常設定爲圖片自己的尺寸,防止被拉伸而失真)。字體
屏幕分辨率變化時,頁面裏元素的大小會變化而但佈局不變。【這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示。網站
使用%百分比定義寬度,高度大都是用px來固定住,能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整,儘量的適應各類分辨率。每每配合 max-width/min-width 等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。ui
這種佈局方式在Web前端開發的早期歷史上,用來應對不一樣尺寸的PC屏幕(那時屏幕尺寸的差別不會太大),在當今的移動端開發也是經常使用佈局方式,但缺點明顯:主要的問題是若是屏幕尺度跨度太大,那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。由於寬度使用%百分比定義,可是高度和文字大小等大都是用px來固定,因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,可是高度、文字大小仍是和原來同樣(即,這些東西沒法變得「流式」),顯示很是不協調設計
自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局,即建立多個靜態佈局,每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部(頁面元素位置發生改變),但在每一個靜態佈局中,頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。
屏幕分辨率變化時,頁面裏面元素的位置會變化而大小不會變化。
使用 @media 媒體查詢給不一樣尺寸和介質的設備切換不一樣的樣式。在優秀的響應範圍設計下能夠給適配範圍內的設備最好的體驗,在同一個設備下實際仍是固定的佈局。
隨着CSS3出現了媒體查詢技術,又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在全部終端上(各類尺寸的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 ">
結論
1.若是隻作pc端,那麼靜態佈局(定寬度)是最好的選擇;
2.若是作移動端,且設計對高度和元素間距要求不高,那麼彈性佈局(rem+js)是最>好的選擇,一份css+一份js調節font-size搞定;
3.若是pc,移動要兼容,並且要求很高那麼響應式佈局仍是最好的選擇,前提是設計根據不一樣的高寬作不一樣的設計,響應式根據媒體查詢作不一樣的佈局。