<!doctype html> <html data-use-rem><!--需要加的--> <head> <meta charset="gb2312"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="applicable-device" content="mobile"> <title>rem单位使用</title> <script src="https://style.org.hc360.com/js/build/source/core/jquery.min.js"></script> <script src="https://style.org.hc360.com/js/M-hc/jquery_self.js"></script> </head> <body> <style> .mbg1{ background:url(../images/t1.jpg) no-repeat center center; width:100vw; height:6.57rem; background-size:cover; overflow:hidden;} .mbg2{ background:url(../images/t2.jpg) no-repeat center center; width:100vw; height:6.29rem; background-size:cover; overflow:hidden;} </style> <div class="mbg1"></div> <div class="mbg2"></div> <!--需要加的--> <script type="text/javascript"> (function (win){ var doc = win.document; var html = doc.documentElement; var option = html.getAttribute('data-use-rem'); if( option === null ) return; // defaut 750px； var baseWidth = option == 'default' || option == '' || parseInt(option) <= 0 ? 750 : parseInt(option); var grids = baseWidth/100, resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = html.clientWidth || 375; // default to 375 if can't get device-width html.style.fontSize = clientWidth / grids + 'px'; }; // Abort if browser does not support addEventListener if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); recalc(); })(window); </script> </body> </html>