PostCSS Retina
PostCSS plugin for transform retina border by scale-box on mobile.
- Automatically transform your border in retina without change anything.
- support border-radius and color.
- it's easy to remove it to use other way such as lib-flexible
How It Works
use a ::before
element to create a scale border and replace the origin.
Example
a simple page to show the document structure
before:
after:
/* dpr is 2 */ {} /* dpr is 3 */ {}
Install
npm install --save-dev postcss-retina
Usage
Notice
- make sure your box is not a pseudo-class.
/* WILL NOT to be transformed *//* WILL NOT to be transformed */
- make sure your
border
andborder-radius
usepx
unit.
/* WILL be transformed *//* WILL NOT be transformed */
border-radius
will not be transformed if there is not a border declare in same rule.
In v1.1.0+ you can comment
/*retina*/
to mark it need to be transformed.
- if your don't need transform any border, try to do like:
See PostCSS docs for examples for your environment.