响应式字体(js控制)

Posted 2020-08-22 z_e_r_o

window.onload=function(x){if (‘addEventListener‘ in document) {document.addEventListener(‘DOMContentLoaded‘, function() {}, false);};function w(){var a=r.getBoundingClientRect().width;a>750&&(a=750*v),x.rem=a/15,r.style.fontSize=x.rem+"px"}var v,u,t,s=x.document,r=s.documentElement,q=s.querySelector(‘meta[name="viewport"]‘),p=s.querySelector(‘meta[name="flexible"]‘);if(q){var o=q.getAttribute("content").match(/initial\-scale=(["‘]?)([\d\.]+)\1?/);o&&(u=parseFloat(o[2]),v=parseInt(1/u))}else{if(p){var o=p.getAttribute("content").match(/initial\-dpr=(["‘]?)([\d\.]+)\1?/);o&&(v=parseFloat(o[2]),u=parseFloat((1).toFixed(2)))}}if(!v&&!u){var n=(x.navigator.appVersion.match(/android/gi),x.navigator.appVersion.match(/iphone/gi)),v=x.devicePixelRatio;v=n?v>=3?3:v>=2?2:1:1,u=1/v}if(r.setAttribute("data-dpr",v),!q){if(q=s.createElement("meta"),q.setAttribute("name","viewport"),q.setAttribute("content","initial-scale="+u+", maximum-scale="+u+", minimum-scale="+u+", user-scalable=no"),r.firstElementChild){r.firstElementChild.appendChild(q)}else{var m=s.createElement("div");m.appendChild(q),s.write(m.innerhtml)}}x.dpr=v,x.addEventListener("resize",function(){clearTimeout(t),t=setTimeout(w,300)},!1),x.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(t),t=setTimeout(w,300))},!1),"complete"===s.readyState?s.body.style.fontSize=12*v+"px":s.addEventListener("DOMContentLoaded",function(){s.body.style.fontSize=12*v+"px"},!1),w()}(window);

把上面这段代码放入js中,之后设置字体rem,在屏幕宽度为750px内时字体会根据屏幕缩小而缩小,