響應式佈局

    前兩天在作一個有關於問卷項目的前端開發，其中主要涉及到兩方面的內容。第一個方面就是問卷須要同時涉及到pc端和手機端兩個部分，更側重與手機端的展現。第二個方面就是代碼是嵌入到第三方代碼中，同時須要在第三方平臺投放和統計，牽扯到js跨域問題。

    首先說一下手機端開發遇到的一些問題和總結吧。（其實手機端有太多的點須要注意，這裏只是說了一些這個項目遇到的，以後會慢慢補充）

響應式佈局

由於要兼容pc端，同時是在第三方中嵌入代碼，沒有辦法開發兩套css來適應頁面，因此運用了響應式佈局。

實現響應式佈局主要須要完成下面幾個步驟：

1. 首先在head標籤添加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

具體的參數意義：

meta 標籤的viewport屬性，是在移動設備上設置原始大小，顯示和是否縮放的聲明。可使用的參數設置以下∶

width ： viewport的寬度

height ： viewport的高度

initial-scale ： 初始的縮放比例

minimum-scale ： 容許用戶縮放到的最小比例

maximum-scale ： 容許用戶縮放到的最大比例

user-scalable ： 用戶是否能夠手動縮放

2. 設置媒體檢測

PC端：

@media screen and (min-width:1280px) {
  #head { … }
  #content { … }
  #footer { … }
}

手機端：

@media screen and (min-width:320px) and (max-width: 414px){

}

移動端常見的開發技巧

1. 在不使用響應式佈局的狀況下，寬度應儘可能使用百分比來表示

2. 元素儘可能不要使用absolute，使用的話在外面套一層relative

    若是使用absolute來佈局的話，可能會由於分辨率的不一樣而致使元素的位置偏移。由於當父元素不設置relative時absolute的left，top等數值是相對於整個瀏覽器的寬高做爲參考值。固然若是不得不使用absolute的時候，把能夠控制的父元素設置爲relative元素，這樣能夠保證局部的寬高是不變的，不會由於分辨率的不一樣而致使顯示錯位等狀況。

3. 設置文本，使用em或rem

html {
    font-size: 62.5%;
}
div {
    font-size: 1rem;
}

原理：

瀏覽器約定：1em = 16px

em是相對於父元素的大小

rem是相對於根目錄的大小

爲了改變1rem = 16px的對應關係，所以設置html {font-size: 62.5%}，這樣以後的設置就能夠按照1rem = 10px的關係來換算了。

em也是同理的，只不過可能會由於父元素的大小而改變。

rem的原理是一致的，只不過rem的便捷性在於它是相對於根目錄的字體大小來決定的，不會由於父元素的大小改變而改變。

rem兼容性：（ie9.0+，firefox，chrome都支持了，若是不考慮兼容低版本ie就可使用，剛好咱們的項目不須要）

p.s.  很是感謝@流雲諸葛的簡單的3步設置，讓你的博客園更漂亮！的博文，借用了一下里面的css。