rem自动适应性布局方案

# @njleonzhang/postcss-px-to-rem

将px转成rem，会根据根元素的fontsize进行变化

npm i @njleonzhang/postcss-px-to-rem -S

.postcssrc.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "@njleonzhang/postcss-px-to-rem": {
      unitToConvert: 'px', // 要转换的单位，默认情况下，它是px。
      widthOfDesignLayout: 1440, // (Number) 设计布局的宽度。
      unitPrecision: 8, // (Number) 允许 REM 单位增长到的十进制数。
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器。
      minPixelValue: 1, // (Number) 设置要替换的最小像素值。
      mediaQuery: false // (Boolean) 允许在媒体查询中转换 px。
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# lib-flexible-for-dashboard

npm i lib-flexible-for-dashboard -S

const dashboardFlexible = require('lib-flexible-for-dashboard')
dashboardFlexible.init(16 / 9)

1
2

上次更新: 2022/05/05, 17:47:41

← New date()浏览器时间兼容性浏览器缓存机制→