前端開發之初探四

佈局 

第一節、靜態佈局（Static Layout）

即傳統Web設計，網頁上的全部元素的尺寸一概使用px做爲單位。

一、佈局特色：無論瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫代碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設置了min-width，這樣的話，若是小於這個寬度就會出現滾動條，若是大於這個寬度則內容居中外加背景，這種設計常見與pc端。
二、設計方法：
　PC：居中佈局，全部樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
　移動設備：另外創建移動網站，單獨設計一個佈局，使用不一樣的域名如wap.或m.。

在移動端開發中採用靜態佈局的兩種方式：

（1）在viewport meta標籤上設置width=320，頁面的各個元素也採用px做爲單位。經過用JS動態修改標籤的initial-scale使得頁面等比縮放，從而恰好佔滿整個屏幕。

（2）設在viewport meta標籤上設置content」width=640,user-scalable=no，頁面的各個元素也採用px做爲單位。因爲640px超出了手機寬度，瀏覽器會自動縮小頁面至恰好全屏。

優勢：這種佈局方式對設計師和CSS編寫者來講都是最簡單的，亦沒有兼容性問題。

缺點：顯而易見，即不能根據用戶的屏幕尺寸作出不一樣的表現。

第二節、流式佈局（Liquid Layout）

流式佈局（Liquid）的特色（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。表明做柵欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。

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

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

第三節、自適應佈局（Adaptive Layout）

自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。
一、佈局特色：屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。
二、設計方法：使用 @media 媒體查詢給不一樣尺寸和介質的設備切換不一樣的樣式。在優秀的響應範圍設計下能夠給適配範圍內的設備最好的體驗，在同一個設備下實際仍是固定的佈局

第四節、響應式佈局（Responsive Layout）

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

響應式幾乎已經成爲優秀頁面佈局的標準。

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

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

優勢：適應pc和移動端，若是足夠耐心，效果完美

缺點：（1）媒體查詢是有限的，也就是能夠枚舉出來的，只能適應主流的寬高。

（2）要匹配足夠多的屏幕大小，工做量不小，設計也須要多個版本。

第五節、彈性佈局（rem/em佈局）

一、rem,em區別：rem,em都是順應不一樣網頁字體大小展示而產生的。其中，em是相對其父元素，在實際應用中相對而言會帶來不少不便；而rem是始終相對於html大小，即頁面根元素。

二、使用 em 或 rem 單位進行相對佈局，相對%百分比更加靈活，同時能夠支持瀏覽器的字體大小調整和縮放等的正常顯示，由於em是相對父級元素的緣由沒有獲得推廣。

三、這類佈局的特色是，包裹文字的各元素的尺寸採用em/rem作單位，而頁面的主要劃分區域的尺寸仍使用百分數或px作單位（同「流式佈局」或「靜態/固定佈局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網頁內文字尺寸的放大，這種狀況下。使用em/rem作單位，可使包裹文字的元素隨着文字的縮放而縮放。

四、瀏覽器的默認字體高度通常爲16px，即1em:16px，可是 1:16 的比例不方便計算，爲了使單位em/rem更直觀，CSS編寫者經常將頁面跟節點字體設爲62.5%，好比選擇用rem控制字體時，先須要設置根節點html的字體大小，由於瀏覽器默認字體大小16px*62.5%=10px。這樣1rem即是10px，方便了計算。

那麼爲何通常可能是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

由於有些瀏覽器默認的不是16px，或者用戶修改了瀏覽器默認的字體大小（因瀏覽器分辨率大小，視力，習慣等因素）。若是咱們將其設置爲10px，必定會影響在這些瀏覽器上的效果，因此最好用絕大多數用戶默認的16做爲基數 * 62.5% 獲得咱們須要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

body {font-size: 1.4rem;/*1.4 × 10px = 14px */}

h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

實際項目設置成 font-size: 62.5%可能會出現問題，由於chrome不支持小於12px的字體，計算小於12px的時候，會默認取12px去計算，致使chrome的em/rem計算不許確。

針對這個現象，能夠嘗試設置html字體爲100px，body 修正爲16px，這樣 0.1rem 就是 10px，而body的字體仍然是默認大小，不影響未設置大小的元素的默認字體的大小。

五、用em/rem定義尺寸的另外一個好處是更能適應縮進/以字體單位padding或margin／瀏覽器設置字體尺寸等狀況（由於em/rem相對於字體大小，會同步改變）。例如：p{ text-indent: 2em; }

六、使用rem單位的彈性佈局在移動端也很受歡迎。

rem與em、px的區別：
px：像素，比較精確的單位，但很差作響應式佈局
em：以父節點font-size大小爲參考點，標準不統一，容易形成混亂
REM支持的瀏覽器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8沒法支持。

優勢：理想狀態是全部屏幕的高寬比和最初的設計高寬比同樣，或者相差很少，完美適應。

 

寬高自適應：網頁佈局中常常要定義元素的寬和高。但不少時候咱們但願元素的大小可以根據窗口或子元素自動調整，這就是自適應。

元素自適應在網頁佈局中很是重要，它可以使網頁顯示更靈活，能夠適應在不一樣設備、不一樣窗口和不一樣分辨率下顯示。

（1）寬度自適應

        元素寬度設置爲100%。（塊元素寬度默認爲100%）

（2）高度自適應

        1)元素高度自適應窗口高度

        設置方法：html,body{height:100%;}

        2)自適應元素高度：height:100%; 

（3）元素具有最小高度的自適應

　　min-height屬性：最小高度；(IE6瀏覽器不識別該屬性)

　　hack1:min-height:value; _height:value;

　　hack2:min-height:value;  height:auto!important;   height:value;(建議使用)

　　注：height屬性在IE6裏就相似min-height做用。 

　　min-height（最小高度）

　　max-height(最大高度)

　　min-width(最小寬度)

　　max-width(最大寬度)

　　注：IE6及如下版本不識別該組屬性。

（4）浮動元素父元素高度自適應（高度塌陷）

　　hack1：給父元素添加聲明overflow:hidden;

　　hack2:在浮動元素下方添加空div,並給該元素添加聲明：clear:both;height:0;overflow:hidden;

　　 hack3:萬能清除浮動法

　　:after{content:」.」;display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}