h5移動端適配方案

flex布局

flex布局，不使用rem，直接使用px。

doctype html

>
<
html
>
<
head
>
<
title
>
title
>
<
style
>
/*利用flex屬性，可以實現塊級元素1：1：1
*//*
簡單的就能使裡面的內容居中（尤其是垂直居中，好用到爆）
*/.box
.item1
.item2
.item3
style
>}}
head
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="item1"
>
div>
<
div 
class
="item2"
>
div>
<
div 
class
="item3"
>
div>
div>
body
>
html
>

rem方案

說明：螢幕根據設計稿的比例轉換對應的rem值(js會根據不同的裝置新增不同的縮放比(建議內聯處理，在所有資源載入之前執行這個js))

螢幕根據設計稿的比例轉換對應的rem值，比如：

750的設定 = 16*(clientwidth/375)

640的設定 = 20*(clientwidth/320)

320的設定 = 10*(clientwidth/320)

例如：設計稿是750px寬度（基於iphone6 375*2=750 得到的設計稿），如果設計稿中量出某塊區域的margin-top值20px，

在實際iphone6裝置375px寬度中，應該除以2，所以得到值mragin-top是20/2=10px,

因為1rem=16px（16*（iphone6裝置寬度/375）+'px'）,所以對應換算成rem為10/16=0.625rem。

css**中就是margin-top:0.625rem。

var aa = function(doc, win)el.style.fontsize = 16*(clientwidth/375)+'px';

}if(!doc.addeventlistener)// addeventlistener事件方法接受三個引數：第乙個是事件名稱比如點選事件onclick，
// 第二個是要執行的函式，第三個是布林值
win.addeventlistener(resizeevt,recalc,false);
// 繫結瀏覽器縮放與載入時間
win.addeventlistener('domcontentloaded',recalc,false);
}(function(doc, win)el.style.fontsize = 16*(clientwidth/375)+'px';
}if(!doc.addeventlistener)// addeventlistener事件方法接受三個引數：第乙個是事件名稱比如點選事件onclick，
// 第二個是要執行的函式，第三個是布林值
win.addeventlistener(resizeevt,recalc,false);
// 繫結瀏覽器縮放與載入時間
win.addeventlistener('domcontentloaded',recalc,false);
})(document, windo

//

移動端h5終端適配方案
var aa = function
(doc, win)
el.style.fontsize = 16*(clientwidth/375)+'px';
}    
if(!doc.addeventlistener)
//addeventlistener事件方法接受三個引數：第乙個是事件名稱比如點選事件onclick，
//第二個是要執行的函式，第三個是布林值
win.addeventlistener(resizeevt,recalc,false
);    
//繫結瀏覽器縮放與載入時間
win.addeventlistener('domcontentloaded',recalc,false);}
(function
(doc, win)
el.style.fontsize = 16*(clientwidth/375)+'px';
}    
if(!doc.addeventlistener)
//addeventlistener事件方法接受三個引數：第乙個是事件名稱比如點選事件onclick，
//第二個是要執行的函式，第三個是布林值
win.addeventlistener(resizeevt,recalc,false
);    
//繫結瀏覽器縮放與載入時間
win.addeventlistener('domcontentloaded',recalc,false
);})(document, window);

rem方案二

引入flexible.js，不需要在html結構中加入viewport標籤。

flexible.js會在元素上增加乙個data-dpr屬性，以及乙個font-size樣式。js會根據不同的裝置新增不同的data-dpr值，

比如說2或者3同時會給html加上對應的font-size的值，

比如說75px；以及會新增viewport標籤，js會根據不同的裝置新增不同的縮放比(建議內聯處理，在所有資源載入之前執行這個js)

手淘H5移動端適配方案flexible原始碼分析

移動端適配一直是乙個值得 的問題，在業餘時間我找了一些頁面，檢視了一些廠商對於移動端h5頁面的適配方案，看到了幾個典型的例子，今天就來記錄一下我看到的第乙個典型的例子，也是我們公司目前普通h5專案正在使用的適配方案。這個適配方案是lib flexible，在看這個原始碼的同時，我想先來回顧一下幾個概...

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...

H5移動端適配總結

因此通過查閱資料，了解到兩種螢幕適配的方案 1.通過對介面進行等比例縮放 2.使用rem單位進行介面的適配。1 第一種方式屬於有一種暴力適配，即通過計算設計人員給出的設計稿的尺寸和裝置的真實尺寸，將這個比值作為縮放比賦值飛meta標籤，但是這種情況下往往會出現字型和的失真或者銳化。實現 大致如下 以...