Realize PC and H5 adaptive form. When PC is used, part of the width of the form is 750px and there is a background image. When mobile is used, part of the width of the form is consistent with the width of the device, and no background image is displayed
Introduce rem.js in public and rem.js in index.html
Rem. Js code! (function (n) {
var e = n.document
var t = e.documentElement
var i = 750// Cut the size of the graph
var d = i / 100// If the width is set to 7.5rem, the width is the same as the device width
var o = 'orientationchange' in n ? 'orientationchange' : 'resize'
var a = function () {
var n = t.clientWidth || 375; n > 750 && (n = 750)// If the width is greater than 750, it is considered PC, so that the width is still 750
t.style.fontSize = n / d + 'px'
}
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener('DOMContentLoaded', a, !1))
}(window))
Copy the code
Px =rem* fontSize of the root element