Transform scaleY(.5)
Viewport + REM
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } .box { width: .5rem; height: .5rem; background-color: chocolate; border-bottom: 1px solid #000; } </style> <body> <div class="box"> </div> </body> </ HTML > <script> window.onload = function () {// pixel ratio let DPR = DevicePixelRatio console.log(DPR) var scale = 1 / DPR // Get meta tag var metaNode = Document. QuerySelector (' meta [name = "viewport"]) var width = document. The documentElement. ClientWidth / / set the scaling metaNode.setAttribute('content', 'width = device - width, Var htmlNode = document.querySelector(' HTML ') htmlNode.style.fontSize = width * dpr+'px' } </script>Copy the code