rem适配

(function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        window.clientWidth = docEl.clientWidth;
        window.clientHeight = docEl.clientHeight;
        if (!window.clientWidth) return;
        var aspectRatio = window.clientWidth / window.clientHeight;
        if (aspectRatio > 1920 / (window.screenRatio ? 1440 :1080)) {
          docEl.style.fontSize = 100 * (window.clientHeight / (window.screenRatio ? 1440 :1080)) + 'px';
          window.base = 100 * (window.clientHeight / (window.screenRatio ? 1440 :1080));
        } else {
          docEl.style.fontSize = 100 * (window.clientWidth / 1920) + 'px';
          window.base = 100 * (window.clientWidth / 1920);
          // 判断是否为移动设备，提示旋转屏幕
        }
        // alert(navigator.userAgent)
        var isMobile = {
          Android: function () {
            return navigator.userAgent.match(/Android/i) ? true : false;
          },
          BlackBerry: function () {
            return navigator.userAgent.match(/BlackBerry/i) ? true : false;
          },
          iOS: function () {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
          },
          Windows: function () {
            return navigator.userAgent.match(/IEMobile/i) ? true : false;
          },
          any: function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
          }
        };
      };
    try {
      recalc();
    } catch (e) {
    }
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
  

第二中

 

(function (doc, win) {  // 自适应
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) {
        return;
      }
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; // 放下16个字
    };
  console.log(resizeEvt);
  if (!doc.addEventListener) {
    return;
  }
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

第三中

作为一名前端开发，在做移动端适配时rem、vw是我们经常用到的单位，但是我们在实际开发过程中需要将设计稿上的px转换成rem，如果手动去计算，将是一个很耗时、费力的过程。这是就需要一个工具可以帮我们自动将px转成rem、vw。

---

开始之前，我们先来了解一个概念【PostCSS】

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具，类似babel对js的处理。常见的功能如：

1 . 使用下一代css语法(cssnext)

2 . 自动补全浏览器前缀(autoprefixer)

3 . 自动把px代为转换成rem/vw(postcss-pxtorem/postcss-px-to-viewport)

4 . css代码压缩等等

PostCSS 只是一个工具，本身不会对css一顿操作，一般不单独使用，而是与已有的构建工具进行集成，通过插件实现功能。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。

Webpack 中使用 PostCSS 插件示例：

 

postcss-loader 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加载 Autoprefixer 插件。

言归正传，接下来我们看一下如果使用PostCSS把px自动转成rem、vw

postcss-pxtorem

功能：把px转换成rem

安装：npm install postcss-pxtorem --save-dev

配置项：

'postcss-pxtorem':{

rootValue:100,// html节点设的font-size大小，由于chrome最小12px，所以基值要设置大写

unitPrecision:5,// 转rem精确到小数点多少位

propList:['font','font-size','line-height','letter-spacing'],// 指定转换成rem的属性，支持 * ！

selectorBlackList:[],// str或reg ，指定不转换的选择器，str时包含字段即匹配

replace:true,

mediaQuery:false,// 媒体查询内的px是否转换minPixelValue:0// 小于指定数值的px不转换

}

postcss-px-to-viewport

之前做移动端适配时，基本上是采用rem方案。但随着viewport越来越被大家熟悉，我们似乎发现了一种更好的方案。

功能：将px单位自动转换成viewport单位

安装：npm install postcss-px-to-viewport --save-dev

配置项：

'postcss-px-to-viewport': {

      unitToConvert:'px'， //要转换的单位，默认是'px'

      viewportWidth: 750,  // 视窗的宽度，对应的是我们设计稿的宽度，一般是750，默认是320

      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置

      unitPrecision: 3,    // 指定`px`转换为视窗单位值的小数位数，默认是5

      propList: ['*'],    //指定可以转换的css属性，默认是['*']，代表全部属性进行转换

      viewportUnit: "vw",  //指定需要转换成的视窗单位，建议使用vw

      fontViewportUnit: 'vw',     //指定字体需要转换成的视窗单位，默认vw

      selectorBlackList: ['.ignore'],// 指定不转换为视窗单位的类，可以自定义，可以无限添加，建议定义一至两个通用的类名

      minPixelValue: 1,    // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值

      mediaQuery: false,     // 允许在媒体查询中转换`px`

      replace: true,

       exclude: [],   //设置忽略文件，如node_modules

    }

作者：forever_提拉米苏
链接：https://www.jianshu.com/p/6ef14f2a589e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

4 

react使用插件postcss-pxtorem配置px自动转换rem

1.下载postcss-pxtorem插件

npm install postcss postcss-pxtorem --save-dev

2.下载craco ，进行webpack的配置(ant design中的),或者在webpack.config.js中，这里的话我使用antd的craco插件

npm install @craco/craco

3.在项目根目录创建一个craco.config.js进行配置

const pxtorem = require("postcss-pxtorem");
//https://github.com/cuth/postcss-pxtorem,参考地址
module.exports = {
  style: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 3.75, // 设计稿宽度/100，即分成多少份
          unitPrecision: 5, // 小数精度
          propList: [
            "font",
            "font-size",
            "line-height",
            "letter-spacing",
            "width",
            "height",
          ],
          selectorBlackList: [],
          replace: true,
          mediaQuery: false,
          minPixelValue: 0,
          exclude: /node_modules/i,
        }),
      ],
    },
  },
};

4.如果报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8,因为postcss-pxtorem最高也才6.0.0版本（就2021年5月31日来说是6.0.0，往后就不知道了），只需下载指定5.1.1版本的postcss-pxtorem就行了

npm install postcss-pxtorem@5.1.1 --save-dev

5.到这里其实还会遇到一个bug,就是元素转换的rem对了，但是展示的效果却不一样，这是因为我们没有设置根标签默认的字体大小,这里有一个根据不同设备会设置根标签的默认字体大小，只要引进你的react入口文件就好了，拿走不谢

(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 = '16px'
    } else {
      /*
        DOMContentLoaded DOM元素加载完成就触发
        load 页面所有资源加载触发
      */
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 100
  function setRemUnit () {
    var rem = docEl.clientWidth / 100
    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))