<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body style="box-sizing: border-box;margin:0;padding:0"> <div style="7.5rem;height:2rem;background:red"></div> <script> (function() {//解决不同手机dpr不一致的适配问题(解决了1px的问题) var scale = 1.0; if (window.devicePixelRatio === 2) { scale *= 0.5; } if (window.devicePixelRatio === 3) { scale *= 0.333333; } var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); document.head.appendChild(meta); })(); (function (doc, win) {//解决不同手机分辨率不一致的适配问题 var docEl = ""; docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) { return } else { if (clientWidth > 1280) { docEl.style.fontSize = 170.66+ "px" } else { if (clientWidth < 640) { docEl.style.fontSize = 85.33 + "px" } else { if (clientWidth <= 1280 || clientWidth >= 640) { docEl.style.fontSize = (clientWidth / 750) * 100 + "px" } } } } }; if (!doc.addEventListener) { return } win.addEventListener(resizeEvt, recalc, false); doc.addEventListener("DOMContentLoaded", recalc, false) })(document, window); </script> </body> </html>