隨着愈來愈多不一樣分辨率和大小的顯示器終端出如今市場上,原先用一個板式的web頁面設計和佈局來應對全部設備的作法遇到了愈來愈多的問題,針對寬屏設備開發的頁面在手機或者pad上佈局會產生各類錯位或者Bug,大幅度下降了用戶體驗。css
響應式佈局就是爲了應對這樣的狀況而出現的一種設計方式,其核心理念是在不一樣的設備寬度上應用不一樣的樣式和設計。Responsive web design(RWD):的基本設計思路是:html
1、採用 CSS 的 media query 技術前端
2、流體佈局( fluid grids )web
3、自適應的圖片/視頻等資源素材瀏覽器
此外,記得帶上經常使用的標籤:佈局
<link type="text/css" rel="stylesheet" href="css/normalize.css">字體
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0">網站
<meta http-equiv=X-UA-Compatible content="IE=edge">ui
目前的web開發通常基於pc端,顯示器的尺寸通常在13寸以上,所以模板的大小每每超過1200px,而蘋果手機的顯示器寬度在320px,爲了適應這種寬度的變化,網頁在設計時必須考慮到寬度在320px-1200px時網頁排版有可能發生的各類變化。spa
在有專門的設計師或者美工時,能夠根據他的設計圖來進行不一樣頁面的開發,好比根據1200px寬度、800px和320px寬度下的設計圖進行頁面開發。
能夠將頁面分爲頭部、主體和頁腳三個部分,每一個部分對分辨率的變化的反應程度能夠有所不一樣,好比頭部能夠在320 480 800時分別擁有不一樣的佈局,而主體在600和1000時分別有各自的佈局,這是沒有問題的。
前端在開發的時候經常要和三種像素單位打交道,rem em和px。下面來介紹一下三種分辨率的不一樣:
PX
px像素(Pixel)。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
PX特色
1. IE沒法調整那些使用px做爲單位的字體大小;
2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位;
3. Firefox可以調整px和em,rem,可是96%以上的中國網民使用IE瀏覽器(或內核)。
EM
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置,則相對於瀏覽器的默認字體尺寸。
EM特色
1. em的值並非固定的;
2. em會繼承父級元素的字體大小。
注意:任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算,須要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10,而後換上em做爲單位就好了。
因此咱們在寫CSS的時候,須要注意兩點:
1. body選擇器中聲明Font-size=62.5%;
2. 將你的原來的px數值除以10,而後換上em做爲單位;
3. 從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。
也就是避免1.2 * 1.2= 1.44的現象。好比說你在#content中聲明瞭字體大小爲1.2em,那麼在聲明p的字體大小時就只能是1em,而不是1.2em, 由於此em非彼em,它因繼承#content的字體高而變爲了1em=12px。
REM
rem是CSS3新增的一個相對單位(root em,根em),這個單位引發了普遍關注。這個單位與em有什麼區別呢?區別在於使用rem爲元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身,經過它既能夠作到只修改根元素就成比例地調整全部字體大小,又能夠避免字體大小逐層複合的連鎖反應。目前,除了IE8及更早版本外,全部瀏覽器均已支持rem。對於不支持它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下面就是一個例子:
p {font-size:14px; font-size:.875rem;}
注意: 選擇使用什麼字體單位主要由你的項目來決定,若是你的用戶羣都使用最新版的瀏覽器,那推薦使用rem,若是要考慮兼容性,那就使用px,或者二者同時使用。
px 與 rem 的選擇?
對於只須要適配少部分手機設備,且分辨率對頁面影響不大的,使用px便可 。
對於須要適配各類移動設備,使用rem,例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。
來源:http://www.runoob.com/w3cnote/px-em-rem-different.html
因爲這樣的差異,咱們在製做響應式佈局頁面的時候,應該優先選擇相對根大小的rem單位了,在html中將font-size設置爲62.5%, 這樣1rem就和10px等值了。
在製做響應式佈局時,咱們每每會使用自適應的佈局,由於目前移動端設備五花八門,屏幕的寬度也沒有統一標準,所以能夠隨着屏幕拉伸改變寬度的自適應的頁面確定要因爲固態寬度的佈局。
那麼在製做自適應的佈局時,要儘可能避免使用固定困高,而是用百分比寬高,在多列布局時能夠用calc() 來對內容進行佈局,如calc(%50 - 20rem);也能夠對子元素進行佈局,好比div中進行三列布局時,能夠設置每一個子元素的大小爲calc(100%/3),此時要注意,必定要在父元素中設置font-size:0,如若否則,子元素之間的空白符會被計算成字符單位,從而使子元素之間產生空隙,致使錯位。
對於一些但願使其浮動的元素,也能夠用display:inline-block 來代替float:left;但願圖片等元素居中時,能夠設置display爲block,以後設置margin爲 0 auto 。
媒體查詢能夠說是響應式佈局的核心,語法爲:
@media only screen and (max-width: 50em){
[Content]
}
也就是在屏幕寬度爲800px(50*16)是,頁面採起該樣式,花括號中的樣式會覆蓋默認的樣式,可是不會進行重寫,所以對須要的屬性進行操做便可。要注意的地方是,這裏儘可能使用em而不是rem單位,這裏的數值和單位因爲是讀取瀏覽器的,不收到html 或者 body中font-size的影響,換算比例始終爲1:16 。
用srcset屬性或者picture標籤,來對不一樣位置的圖片使用不一樣分辨率的文件。