根据设计稿宽度，设置html字体大小，根据rem自动适配页面元素大小。
将js引入html即可
// resize.js
// JS JS动态计算rem转换p
function fontSize() {
var mobileType = ismobile(0);
// 如果需要移动pc做不同处理，可以根据注释条件进行区分
//通过navigator判断是否是移动设备
// if (
// navigator.userAgent.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// ) {
//在移动端
(function (doc, win) {
// html
var docEl = doc.documentElement,
resizeEvt =
"orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (mobileType == "Android") {
// 注释部分可以限制适配最大尺寸，超过最大尺寸，按最大尺寸适配
// clientWidth = clientWidth > 1024 ? 1024 : clientWidth
docEl.style.fontSize = 10.4168 * (clientWidth / 375) + "px"; //这个10可以根据自己使用的数据来调整
}
if (mobileType == "iPhone") {
// clientWidth = clientWidth > 1024 ? 1024 : clientWidth
docEl.style.fontSize = 10 * (clientWidth / 375) + "px"; //这个10可以根据自己使用的数据来调整
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
//移动端 文字适配
// } else {
//如果是pc端我们可以像微信公众号那样，设置最大宽度为740px
// document.documentElement.style.margin = '0 auto'
//PC端
// }
}
// -识别IOS还是安卓
// param test: 0:iPhone 1:Android
function ismobile() {
var app = navigator.appVersion;
if (
/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||
/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(
navigator.userAgent
)
) {
if (window.location.href.indexOf("?mobile") < 0) {
try {
if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
return "iPhone";
} else {
return "Android";
}
} catch (e) {
// alert(e);
}
}
} else if (app.indexOf("iPad") > -1 || app.indexOf("iPhone") > -1) {
return "iPhone";
} else {
return "Android";
}
}
// 执行
fontSize();