關於移動端--適配

標籤：dev   point   ice   一半   style   不同   邊框   視圖   實現   

1 為什麼要適配？

     要實現等比；

預設情況等不等比？不加meta標籤是等比的

加了meta標籤就不等比了。

<metaname="viewport"content="width=device-width,

initial-scale=1.0,user-scalable=no"/>

2 rem適配的本質：rem參照根項目字型（html字型）

  不管視圖多大，在不同的移動端機型上，1rem等於視圖的寬度，所以，根標籤的font-size改成布局視口的大小。

3 viewpoint適配的本質：UI給的320px圖紙（頁面），讓所有裝置的布局視口變為320px,動態改變initial-scale的比值。

4.rem適配

優點：可以使用理想標籤，

   可以實現等比縮放

缺點：換算比較麻煩

    核心思想：基於rem

5.viewport適配

優點：避免複雜的計算，直接使用UI的標準像素值

缺點：不能使用理想視口

  圖片失真情況很嚴重

6.1px像素(1物理像素)實現原理

讓所有布局元素（div）都為rem單位，邊框為px單位

讓頁面中所有元素都縮小一半，讓布局(div)元素rem*2

這樣 1px  css像素就變成了1px的物理像素.

關於移動端--適配