这是一个可以自动计算rem的代码库，适用于所有主流开发环境，如果你感兴趣，建议看到最后。
各种环境的用法分列如下：
1.vue 框架
第一步:
npm install smart-rem -S
第二步:
在文件 src/main.js 中
import smartRem from 'smart-rem'
smartRem(Arguments)
注释: 参数是设计稿的宽度。如果设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法如下：
smartRem(750)
第三步:
在文件 src/*.vue 中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
注释:如果元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单如下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
2.react 框架
第一步:
npm install smart-rem -S
第二步:
在文件 src/index.js 中
import smartRem from 'smart-rem'
smartRem(Arguments)
注释: 参数是设计稿的宽度。如果设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法如下：
smartRem(750)
第三步:
在文件 src/*.css 中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
注释:如果元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单如下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
3.angular 框架
第一步:
npm install smart-rem -S
第二步:
在文件 src/main.ts 中
import smartRem from 'smart-rem'
smartRem(Arguments)
Notes:参数是设计稿的宽度。如果设计稿的宽度是750px，那么smartRem的参数就是750，注意不带px，写法如下：
smartRem(750)
第三步:
在文件 src/**/*.styl 中
.class-name {
width: 1.5rem;
font-size: 0.5rem;
}
注释:如果元素的宽度是150px，那么它的rem值就是1.5rem，计算方式简单如下：
150 / 100 = 1.5
150px =>1.5rem
--------------------
50 / 100 = 0.5
50px => 0.5rem
另外，如果你还是想方便复制，在代码中书写px，推荐在配置完上述smart-rem后，再使用插件postcss-auto-rem，可以自动将px改写成rem。这样代码中还是px，浏览器中看到的是rem。（实际上在输出的打包代码中，已改成rem）。
编译耗时：
postcss-auto-rem快2.24倍，工程越大，对开发效率影响越大。
如何配置postcss-auto-rem？
***注意配置的size参数就是编译时的计算比例，如果参数size：100，则100px在输出文件中会变成1rem.***看如下配置
若是vue框架
在项目根目录下，有**.postcssrc.js** 或者 postcss.config.js，如果没有就手动创建一个。然后增加一个postcss-auto-rem。配置编译参数，如果配置了size为100，那么，你的代码中是100px，则生成的打包文件中会是1rem。计算方式100px/100=1rem。
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
+ "postcss-auto-rem": {size: 100},
}
}
若是react框架
也已经内置了postcss，配置起来也很方便，根目录下的路径文件config/webpack.config.js，如果没有，则运行npm run eject创建出来。然后配置上postcss-auto-rem，下图中加号。
{
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,
},
},
若使用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.');
});
若使用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'));
});
若是自己用wepack从零搭建的工程，则参考如下配置
（1）修改css相关rules配置，增加postcss-loader
如果是Webpack下
在webpack.config.js中使用postcss-loader:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
+ {
+ loader: 'postcss-loader'
+ }
]
}
]
}
}
如果是CSS-in-JS
在jsx中使用postcss最好的方式是使用astroturf，添加到你的webpack.config.js中。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
}
（2）新建postcss.config.js文件，输入配置参数
检查你的项目是否存在postcss配置文件，一般位于根目录。
如果没有postcss的相关配置文件，则可以手动创建一个postcss.config.js，在plugins中，添加require(postcss-auto-rem)
module.exports = {
plugins: [
+ require('postcss-auto-rem')（{size: 100}）,
require('autoprefixer')
]
}
最终效果
源代码
.foo {
/* Input example */
margin: 100px;
padding: 100px;
width: 50px;
font-size: 50px;
}
输出到浏览器中的代码
.foo {
/* Output example */
margin: 1rem;
padding: 1rem;
width: 0.5rem;
font-size: 0.5rem;
}
调试问题：
如果在代码编辑器中，正常修改px值即可；
如果在浏览器中，100px = 1rem，如果调整1px，只需增加0.01rem；（在浏览器上微调，看实时效果，着实比其他方案简单很多哦）
各框架的具体添加方法，可以参考www.npmjs.com/package/pos…
