Remember that if you have any questions during use, please contact email shuaiqiyupu@163.com. I'd be happy to help you.

What can this package do？

smart-rem can dynamically set the pixel value of the root element to adapt to different sizes of the screen.

Usage

npm install smart-rem -S

In the entry file（e.g. src/index.js or src/main.js）

/**
* @param designWidth It's the width of the design draft
* @param designHeight It's the height of the design draft
*/
import smartRem from 'smart-rem'
smartRem(designWidth, designHeight)

If the pixel value in the design draft is like this

width: 100px;
height: 500px;

Then, write the code as follows

/* 100px/100 = 1rem */
width: 1rem;
/* 500px/100 = 5rem */
height: 5rem;

Other attributes with px should be written as above. The calculation ratio is 100.

Other instructions:

If you still want to write px in the code, you can use post-auto-rem to compile after smart-rem is set, so that you can see rem in the browser. Posts-auto-rem is faster than other rem tools.

npm install postcss-auto-rem -D

Add the plugin to plugins list:

module.exports = {

  plugins: [
    
    // The default value of size is 100.
+   require('postcss-auto-rem')({size: 100}),

    require('autoprefixer')

  ]

}

After configuring smart REM and postcss, the effect is very good, as follows：

Your css code

.foo {
    /* Input example */
    margin: 100px;
    padding: 100px;
    width: 50px;
    font-size: 50px;
}

Styles in browser

.foo {
    /* Output example */
    margin: 1rem;
    /* 100px/100 = 1rem */
    padding: 1rem;
    /* 50px/100 = 0.5rem */
    width: 0.5rem;
    font-size: 0.5rem;
}

The calculation ratio is 100.

e.g.

1.Vue Framework

npm install postcss-auto-rem -D

In file .postcssrc.js or postcss.config.js. If it doesn't exist, create one under the root directory of the project.

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "autoprefixer": {},
+   "postcss-auto-rem": {size: 100},
  }
}

2.React Framework

npm install postcss-auto-rem -D

In file config/webpack.config.js. If it doesn't exist, create one with npm run eject.

{
    loader: require.resolve('css-loader'),
    options: cssOptions,
},
{
    loader: require.resolve('postcss-loader'),
    options: {
        ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
+           require('postcss-auto-rem')({size: 100}),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    },
},

3.Node Api

var fs = require('fs');
var postcss = require('postcss');
var postcssAutoRem = require('postcss-auto-rem');
var css = fs.readFileSync('main.css', 'utf8');
+ var options = {size: 100};
+ var processedCss = postcss(postcssAutoRem(options)).process(css).css;
 
fs.writeFile('auto-rem.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('file written.');
});

4.gulp

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var postcssAutoRem = require('postcss-auto-rem');
 
gulp.task('css', function () {
 
    var processors = [
        autoprefixer({
            browsers: 'last 1 version'
        }),
+       postcssAutoRem({size: 100})
    ];
 
    return gulp.src(['build/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

5.If your project framework is designed by yourself with webpack

（1） Add postcss-loader to webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
+         {
+           loader: 'postcss-loader'
+         }
        ]
      }
    ]
  }
}

if css-in-js, add astroturf to webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'postcss-loader'],
      },
      {
        test: /\.jsx?$/,
        use: ['babel-loader', 'astroturf/loader'],
      }
    ]
  }
}

(2)Create file postcss.config.js

module.exports = {

  plugins: [

+   require('postcss-auto-rem')({size: 100}),

    require('autoprefixer')

  ]

}