以下方案是不用在html中設定根字型和meta方案
/**
* created by administrator on 2018/7/27.
*/(function(), function(res) );
},0);
});} else , function(res) );
},0);
}/***適配方案*/
!function(win, lib) );
// 設定了 viewport meta
if (vpmeta)
}// 設定了 flexible meta
else if (flexmeta)
if (maximum) }}
// viewport 或 flexible
// meta 均未設定
if (!dpr && !scale)
docelem.setattribute("data-dpr", dpr);
// 插入 viewport meta
if (!vpmeta) else
}function setfontsize()
// 根節點 fontsize 根據寬度決定
var basesize = winwidth / 10;
docelem.style.fontsize = basesize + "px";
flexible.rem = win.rem = basesize;
}// 調整視窗時重置
win.addeventlistener("resize", function() , false);
// 自己加的
// orientationchange 時也需要重算下吧
win.addeventlistener("orientationchange", function() , false);
// pageshow
// keyword: 倒退 快取相關
win.addeventlistener("pageshow", function(e)
}, false);
// 設定基準字型
if ("complete" === doc.readystate) else , false);
}setfontsize();
flexible.dpr = win.dpr = dpr;
flexible.refreshrem = setfontsize;
flexible.rem2px = function(d)
return c;
};flexible.px2rem = function(d)
return c;
}}(window, window.lib || (window.lib = {}));
/* 這裡我們利用了乙個自執行函式 */
/*(function()
if (currclientwidth < 320)
fontvalue = ((625 * currclientwidth) / originwidth).tofixed(2);
document.documentelement.style.fontsize = fontvalue + '%';
}})();*/
// 當前假如當前解析度是375， 設計稿解析度是750
// 750/375=0.5
// 比例關係是0.5倍
// 再算一下要換算1rem等於多少px，
// 假如我要100， 100/16=6.25
// 把這個換算的乘以剛才得出的比例
// 0.5*625=312.5
// 最後還拼接了乙個百分號 = 312.5%
// 就是在375解析度下 1rem = 312.5%
// 312.5% * 16px = 50px
//通過js來判斷當前螢幕大小，進而設定html的font-size.
// **裡面rem的值就是ui設計稿上量的px除以100就是你**中要寫的rem值。
關於rem適配移動端
function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,false doc.addeventlistener domcontentloaded recalc,false documen...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...
移動端rem適配
前端在開發移動端頁面時，通常會使用rem對不同解析度的 螢幕進行適配，以達到更好的視覺效果。直接貼上 複製可用。一 function doc,win 乘以100，px rem 100 1 docel.style.fontsize 100 width uidpr px recalc if doc.ad...