前端開發 移動端（2） 自適應螢幕

移動端自適應螢幕方法：

1、百分比

2、viewport利用js設定

(function())();

(function()else

}else
})();

3、rem

(function())()

根據上面**，不同尺寸裝置瀏覽器下的1rem=hwidth/15有所不同，在寫頁面的時候我們根據設計圖大小（可能是320,640,750等等）將單位換算成rem，進而相容所 有不同解析度的裝置。

注意雪碧圖尺寸應該換算成rem單位，background-size同樣也換算成rem單位。

（為了避免重複的less -  rem直接單位的轉換，可以利用less進行rem px轉換後用koala進行轉換）

koala是乙個前端預處理器語言圖形編譯工具，支援less、sass、compass、coffeescript，幫助web開發者更高效地使用它們進行開發。跨平台執行，完美相容windows、linux、mac。

示例**：

@r :20rem;

.box // .box
4、彈性盒模型（box和flex）
首先結構**：

父元素樣式控制

#box

子元素樣式控制
#box div
元素具體位置設定：
#box div:nth-of-type(1)
#box div:nth-of-type(2)
#box div:nth-of-type(3)
#box div:nth-of-type(4)

移動端螢幕自適應（筆記）

首先單位自適應，使用rem做單位，rem根據根標籤來決定，若html的font size為50px 那麼1rem就是50px 然後我們在根據螢幕大小來給html定義font size 把以下 寫到index.html中 fnresize window.onresize function functi...

移動端自適應

1 js動態設定html的字型大小 var clientwidth 0 if document.documentelement.clientwidth 600 else document.documentelement.style.fontsize 50 clientwidth 375 px win...

移動端自適應

width device width width為設定layout viewport 的寬度，為乙個正整數，width device 表示寬度是裝置螢幕的寬度 initial scale 1.0 initial scale為設定頁面的初始縮放值，可以是乙個帶小數的數字，1.0就是佔網頁的100 mi...