web移動端適配方案

web移動端經常使用解決方案：

1、經過js+rem，這裏有一個解決方案（http://imochen.github.io/hotcss/）

1.一、rem兼容性（https://caniuse.com）

ios：6.1系統以上

android：2.1系統以上

1.二、什麼是rem的

rem其實就是根據網頁的根元素來設置字體大小，和em（font size of the element）的區別是，em是根據其父元素的字體大小來設置。如今大部分瀏覽器默認font-size:16px。若是一個p標籤想要設置font-size爲12px，用rem做單位則變成了font-size:0.75rem（12/16=0.75）。根據這個原理，將rem運用到佈局，則能夠實現不一樣分辨率的適配。

1.三、rem基準值計算

實際開發中，咱們不可能將默認font-size大小做爲基準值，這個基準值應該是是根據ui設計稿獲取的。若是ui以iphone6（375px）的分辨率爲設計基準，設計圖的分辨率就爲750px（dpr爲2），那麼咱們能夠以375/10=37.5爲基準（也能夠不除已10，這裏只是爲了避免讓font-size值太大）。

1.四、動態計算font-size的值

方法1、利用css媒體查詢

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2) {

      html {

　　　　font-size: 37.5px;

　　}

}

方法2、js計算

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

 

1.五、rem適配進階

當ui使用ipone6（375px）做爲設計基準，完成的設計圖分辨率雙倍的緣由是iphone6屬於高清屏，設備像素比(device pixel ratio)dpr爲2。

經過js的window.devicePixelRatio（這個方法在安卓上可能不許確）獲取到當前設備的dpr，拿到了dpr以後就能夠在viewport meta頭裏，取消讓瀏覽器自動縮放頁面，而本身去設置viewport的content

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

 

這樣一來在開發時就能夠設置font-size爲設計圖大小，這裏iphone6設計圖font-size就爲75px，並且還解決了圖片高清問題和1像素邊框的問題

 

　　　　　　　

2、淘寶flexible方案（https://github.com/amfe/article/issues/17）。