大屏適配：flexible.js的源碼及配置

flexible.js

進行屏幕適配，flexible.js把屏幕分成24等份（也可以自定義別的份數），1920/24=80，所以此時適配時1rem=80px。
在VSCode中使用“cssrem”插件，自動轉換。
在設置中把轉換單位換成80。
使用時直接引入js文件即可。

 

 

 

(function flexible(window, document) {
	var docEl = document.documentElement;
	var dpr = window.devicePixelRatio || 1;
  
	// adjust body font size
	function setBodyFontSize() {
	  if (document.body) {
		document.body.style.fontSize = 12 * dpr + "px";
	  } else {
		document.addEventListener("DOMContentLoaded", setBodyFontSize);
	  }
	}
	setBodyFontSize();
  
	// set 1rem = viewWidth / 10
	function setRemUnit() {
	  var rem = docEl.clientWidth / 24;  // 這裏默認是10等份，手動改爲24，此時1rem=1920/24px即80px。（設計稿是1920px的）
	  docEl.style.fontSize = rem + "px";
	}
  
	setRemUnit();
  
	// reset rem unit on page resize
	window.addEventListener("resize", setRemUnit);
	window.addEventListener("pageshow", function (e) {
	  if (e.persisted) {
		setRemUnit();
	  }
	});
  
	// detect 0.5px supports
	if (dpr >= 2) {
	  var fakeBody = document.createElement("body");
	  var testElement = document.createElement("div");
	  testElement.style.border = ".5px solid transparent";
	  fakeBody.appendChild(testElement);
	  docEl.appendChild(fakeBody);
	  if (testElement.offsetHeight === 1) {
		docEl.classList.add("hairlines");
	  }
	  docEl.removeChild(fakeBody);
	}
  })(window, document);