首先设置body内字体大小为:font-size:0.6rem;
然后写一个js,内容如下,在样式中控制大小均为rem即可:
!function(e,t){function i(){var t=n.getBoundingClientRect().width;t/m>640&&(t=640m);var i=t/16;n.style.fontSize=i+“px”,d.rem=e.rem=i}var a,r=e.document,n=r.documentElement,o=r.querySelector(‘meta[name=“viewport”]’),l=r.querySelector(‘meta[name=“flexible”]’),m=0,s=0,d=t.flexible||(t.flexible={});if(o){console.warn(“将根据已有的meta标签来设置缩放比例”);var p=o.getAttribute(“content”).match(/initial-scale=([\d.]+)/);p&&(s=parseFloat(p[1]),m=parseInt(1/s))}else if(l){var c=l.getAttribute(“content”);if©{var u=c.match(/initial-dpr=([\d.]+)/),f=c.match(/maximum-dpr=([\d.]+)/);u&&(m=parseFloat(u[1]),s=parseFloat((1/m).toFixed(2))),f&&(m=parseFloat(f[1]),s=parseFloat((1/m).toFixed(2)))}}if(!m&&!s){var v=(e.navigator.appVersion.match(/android/gi),e.navigator.appVersion.match(/iphone/gi)),h=e.devicePixelRatio;m=v?h>=3&&(!m||m>=3)?3:h>=2&&(!m||m>=2)?2:1:1,s=1/m}if(n.setAttribute(“data-dpr”,m),!o)if(o=r.createElement_x(“meta”),o.setAttribute(“name”,“viewport”),o.setAttribute(“content”,“initial-scale=”+s+", maximum-scale="+s+", minimum-scale="+s+", user-scalable=no"),n.firstElementChild)n.firstElementChild.appendChild(o);else{var x=r.createElement_x(“div”);x.appendChild(o),r.write(x.innerHTML)}e.addEventListener(“resize”,function(){clearTimeout(a),a=setTimeout(i,300)},!1),e.addEventListener(“pageshow”,function(e){e.persisted&&(clearTimeout(a),a=setTimeout(i,300))},!1),“complete”===r.readyState?r.body.style.fontSize=12m+“px”:r.addEventListener(“DOMContentLoaded”,function(){r.body.style.fontSize=12*m+“px”},!1),i(),d.dpr=e.dpr=m,d.refreshRem=i,d.rem2px=function(e){var t=parseFloat(e)*this.rem;return"string"==typeof e&&e.match(/remKaTeX parse error: Expected 'EOF', got '&' at position 3: /)&̲&(t+="px"),t},d…/)&&(t+=“rem”),t}}(window,window.lib||(window.lib={}));
自适应的写法之一
最新推荐文章于 2021-09-14 08:31:40 发布