用rem實現h5頁面的編寫

2022-09-02 20:48:12 字數 1543 閱讀 8185

一 靜態頁面的布局

將這段**加到script中

(function(doc, win)  else 

};if (!doc.addeventlistener) return;

//瀏覽器寬度高度變化的時候

win.addeventlistener(resizeevt, recalc, false);

//瀏覽器開始渲染的時候

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

設計圖中某個元素的尺寸是200px那麼計算rem就是200/100=2rem

二 頁面的動態效果

一般也就直接用外掛程式了,一般用這個就可以了:

三 頁面中資料的互動

一般移動端頁面的互動和pc端的是一樣的獲取的ajax 就可以了

四 rem在實際中應用的時候,需要完善一下:

直接應用上面那種會出現在安卓的時候正常顯示,在蘋果手機顯示的時候是文字是非常小的

這是dpr的原因,ios的有的是2倍屏,3倍屏,所以會造成「比android」看起來小的原因,解決策略

(function(win,lib) );

if (metael)

} else if (flexibleel)

if (maximumdpr) }}

if (!dpr && !scale) else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else

} else

scale = 1 / dpr;

}docel.setattribute('data-dpr', dpr);

if (!metael) else

}function refreshrem()

var rem = width / 750 * 100; // 設計圖 750

docel.style.fontsize = rem + 'px';

flexible.rem = win.rem = rem;

}win.addeventlistener('resize', function() , false);

win.addeventlistener('pageshow', function(e)

}, false);

if (doc.readystate === 'complete') else , false);

}refreshrem();

flexible.dpr = win.dpr = dpr;

flexible.refreshrem = refreshrem;

flexible.rem2px = function(d)

return val;

}flexible.px2rem = function(d)

return val;

}})(window, window['lib'] || (window['lib'] = {}));

Flexible實現H5頁面的rem布局適配

1 使用flexible實現手淘h5頁面的終端適配 2 flexible實現手淘h5頁面的rem布局適配 3 vue移動端flexible.js結合muse ui使用的小坑 4 的flexible適配方案為什麼只對ios進行dpr判斷,對於android始終認為其dpr為1 6 rem 及由此引申出...

h5頁面的寫法 移動端h5頁面寫法

1.頁面寬度320,所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640,元素尺寸正常 暫未發現問題 3.頁面寬度640,js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...

h5頁面的快取問題

最近遇到乙個靈異事件 js上線前會build帶上hash,hash方式採用 aaa 1s12jashdjas.js 方式 1 開始排查流程,前端修改了不規範的 格式,再次上線仍可復現 2 疑似nginx有快取html檔案,找運維排查,nginx沒有快取該html頁面 3 又排查nginx配置問題,再...