flexible

蔚落 2023-02-25 10:25 25阅读 0赞

## flexible.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;
        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);

## main.js导入 ##

## 设置基准 ##

完工

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端适配方案 flexible.js

前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种

女爷i/ 2023年06月05日 05:44/ 0 赞/ 368 阅读

相关 Flexible(flex)布局入门到彻底理解

一.简介一、概述浮动在移动布局中不再重要，flex盒模型越来越重要。 flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。

墨蓝/ 2023年03月03日 11:20/ 0 赞/ 33 阅读

相关 flexible

flexible.js (function flexible(window, document) { var docEl = document.doc

蔚落/ 2023年02月25日 10:25/ 0 赞/ 26 阅读

相关页面自适应lib-flexible使用

1.安装flexible npm install lib-flexible --save 2.引入flexible 在项目入口文件main.js中添加如下

迷南。/ 2023年02月22日 08:21/ 0 赞/ 39 阅读

相关淘宝flexible 分析源码

淘宝flexible 分析源码 // 立即执行函数 (function() {})() 或者 (function() {} ()) // 主要作用：创建一个独

不念不忘少年蓝@/ 2023年02月17日 03:43/ 0 赞/ 40 阅读

相关如何使用flexible进行手机适配

1：需要用到一个px转换rem的工具cssrem，这是一个sublime的小插件，如何安装以及如何配置如下所示：安装下载本项目，比如：git clo

逃离我推掉我的手/ 2022年06月06日 08:19/ 0 赞/ 183 阅读

相关 A flexible charting library for .NET[from]

from [http://www.codeproject.com/csharp/zedgraph.asp][http_www.codeproject.com_csharp_ze

喜欢ヅ旅行/ 2021年10月26日 15:48/ 0 赞/ 273 阅读

相关 Flexible Single Master Operations (FSMO)

Certain domain and enterprise-wide operations that are not good for multi-master updates

以你之姓@/ 2021年10月24日 03:28/ 0 赞/ 70 阅读

相关 vue.js移动端配置flexible.js

适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm insta

客官°小女子只卖身不卖艺/ 2021年07月26日 18:43/ 0 赞/ 757 阅读

相关移动端适配方案 flexible.js

前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种

电玩女神/ 2021年07月26日 13:58/ 0 赞/ 504 阅读