rem適配移動端js檔案 兩種方法

第一種方法

1.1引入js檔案

(function (win) ;  // abort if browser does not support addeventlistener  

if (!doc.addeventlistener) return; 
win.addeventlistener(resizeevt, recalc, false); 
doc.addeventlistener('domcontentloaded', recalc, false); recalc();})(window);

~

2.1同樣首先引入rem.js檔案

// 監聽螢幕滾動事件，

設定callback為改變字型大小事件window.addeventlistener('resize', sethtmlfontsize)sethtmlfontsize();
/** @method sethtmlfontsize 改變根節點字型大小的函式 * 
計算：當前螢幕 / 標準的750螢幕 * 標準螢幕根元素的字型大小 */function sethtmlfontsize() 
else if (windowwidth < 320) 
//2. 標準螢幕的寬度 
var standardwidth = 750; 
// 標準螢幕的html的字型大小 
var standardhtmlfontsize = 100; 
//3. 當前螢幕需要設定的根元素的字型大小 
var htmlfontsize = windowwidth / standardwidth * standardhtmlfontsize; 
//4. 把當前計算的html 字型大小設定到頁面的html元素上就可以 
document.queryselector('html').style.fontsize = htmlfontsize + 'px';}

html

body

vue 移動端適配 兩種方案

vue中實現移動端的適配 使用 團隊的 flexible實現手淘h5頁面的終端適配 使用vw結合rem實現適配 1.首先 適配的meta標籤少不了 2.設定 html 使用 設計稿 100px 100px 1rem 1rem 原理 a vw 表示螢幕 1 的寬度 b 設計稿 750px c 計算 1...

移動端js適配檔案

function doc,win abort if browser does not support addeventlistener if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.add...

移動端兩種布局方式

rem media less是我們移動端布局的第一種方案。移動端頁面設計稿尺寸 安卓手機尺寸 320px 360px 375px 384px 400px 414px 500px 720px 蘋果手機尺寸 640px 750px 通過less rem media 技術完成頁面在各個手機尺寸上的顯示 手...