grunt-px2rem v0.2.1
grunt-px2rem
Convert px to rem for mobile html5 page
Getting Started
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-px2rem --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-px2rem');
The "px2rem" task
Overview
In your project's Gruntfile, add a section named px2rem
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
px2rem: {
options: {
ignore0: true, // ignore 0px default true
ignore1: true, // ignore 1px default true
root: 32 // set root fontsize, default 32
},
css: { // seperate
files: [{
expand: true, // Enable dynamic expansion
cwd: 'src/css', // Src matches are relative to this path
src: ['**/*.css'], // Actual patterns to match
dest: 'dest/css' // Destination path prefix
}]
},
combin: { // concat all and convert
src: ['src/css/a.css', 'src/css/b.css'],
dest: 'dest/css/all.css'
}
}
},
});
Attention
If you want to use rem to fit variety screen size, You should addEventListener to window resize, and change the html font-size, for example:
(use zepto or jquery)
$(window).on('resize', function () {
var width = Math.min(document.documentElement.clientWidth, 640); // in my page, I limit it to 640
$('html').css('font-size', width / 640 * 32 + 'px');
}).triggerHandler('resize');
In browser, the smallest font-size is 6px, It means if you set the root too small, font-size wont work when the screen change too small.
###Important
background-size and background-position also will be convert to rem, but it's wrong, so in your files, you should use css-font relace css-sprite.