zoukankan      html  css  js  c++  java
  • 大屏适配: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);
    

      

    记下点滴,等老了慢慢欣赏
  • 相关阅读:
    ubuntu下android开发工作环境搭建
    ADB命令行控制界面开关
    chromium os系统编译与环境搭建
    完整代理的简单实现
    OC协议、代理的简单使用
    OC字典的使用
    OC数组的简单使用、NSArray
    OC中NSString的使用、字符串的使用
    OC内存管理、非ARC机制、MRR机制
    OC中重写set和get方法、懒加载
  • 原文地址:https://www.cnblogs.com/binmengxue/p/15039097.html
Copyright © 2011-2022 走看看