make page to auto-fit responsive screen
npm install px2rem-webpack-plugin
`` bash`
npm install px2rem-webpack-plugin --save-dev
The plugin should be used with html-webpack-plugin
` javascript
var HtmlWebpackPlugin = require('html-webpack-plugin');
var Px2remWebpackPlugin = require('px2rem-webpack-plugin');
var webpackConfig = {
entry: 'app.js',
output: {
path: 'dist',
filename: '[hash].app.js'
},
plugins: [
new HtmlWebpackPlugin(),
new Px2remWebpackPlugin({originScreenWidth: 750, maxWidth: 750}),
]
};
`
This will generate a file dist/index.html containing the following:
` html
And translate the
px to rem in all css files, before webpack css-loader handle the css source.
> The plugin can also be used together with sass-loader, less-loader or stylus-loader.
It will auto handle properly after sass/less/stylus compilation but before the css-loader> Note: css files in
node_modules will not be translated.For example the css below
` css
.abc { width: 750px; }
`
will be automatically compiled to
` css
.abc { width: 3.2rem; }
`Contribution Guide
` bash
dev plugin
make dev ## in one bash
make debug ## in another bashbuild for publish
make buildrun tests
make test
``