Mobile page full-screen adaptive scheme (using REM as the unit, the design draft is 750 * 1334)
- Modified from Ali's lib-flexible, compared to lib-flexible, deleted DPR, retains REM
- Fullscreen adaptive, requires a design draft of 750 * 1334
- Unit conversion to 1rem = 50px
Code Introduction:
<Head> <Script>functionRefreshrem () {vare=docel.getboundingclientrect (). Width,t=docel.getboundingclientrect (). Height;if(e/t>750/1334)varI=T/26.68;else var i=e/ the;d ocEl.style.fontSize=I+"px"}varwin=Window,doc=Win.document,docel=Doc.documentelement,tid;win.addeventlistener ("Resize",function() {cleartimeout (tid), Tid=setTimeout (Refreshrem, -)},!1), Win.addeventlistener ("Pageshow",function(e) {e.persisted&&(Cleartimeout (TID), Tid=setTimeout (Refreshrem, -))},!1), Refreshrem ();</Script></Head>
Source
var win = Window;var doc = Win.document;var docel = Doc.documentelement;var tid;function refreshrem () { var width = doc El.getboundingclientrect (). width; var height = docel.getboundingclientrect (). Height; if ((width/height) > (750/1334)) { var rem = height/(1334/50); } else { var rem = width/(750/50 ); } docEl.style.fontSize = rem + ' px ';} Win.addeventlistener (' Resize ', function () { cleartimeout (tid); Tid = SetTimeout (Refreshrem);}, False); Win.addeventlistener (' Pageshow ', function (e) { if (e.persisted) { cleartimeout (TID); Tid = SetTimeout (Refreshrem); }}, False); Refreshrem ();
Mobile-side page adaptation issues