Native to achieve REM response
<! DOCTYPE html>content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <title> </title> <script>/*let the size of text and labels change with the size of the screen to zoom*/ varhtml = document.getelementsbytagname (' html ') [0]; Console.log (HTML); /*take the width of the screen*/ varwidth =window.innerwidth; Console.log (width); /*640*/ varFontSize = 100/640*width;Console.log (fontSize); /*set FontSize*/html.style.fontSize= fontSize + ' px '; Window.onresize=function(){ varhtml = document.getelementsbytagname (' html ') [0]; Console.log (HTML); /*take the width of the screen*/ varwidth =window.innerwidth; Console.log (width); /*640*/ varFontSize = 100/640 * width;Console.log (fontSize); /*set FontSize*/html.style.fontSize= fontSize + ' px '; } </script> <style>body,html{margin:0; padding:0; } div{Width:5. 28rem; Height:1rem; background:red; Color: #fff; Font-size:0. 16rem; } </style>The JQ realizes REM-responsive
$ (function() { $ (window). On (' resize ',function() { var width= $ (window). width (); var fontsize= (width/640) *100; $ (' HTML '). CSS (' font-size ', fontSize) }). Trigger (' resize ')})
Web-Responsive Media query code