Skip to content

参考自:https://github.com/Ziphwy/postcss-retina (修改内容:1.只针对border 1px做处理; 2.修复border-radius单位问题)

Notifications You must be signed in to change notification settings

xifanii/postcss-retina-1px

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS Retina 1px

[PostCSS] plugin for transform 1px 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

before:

.foo {
  color: white;
  border: 1px solid red;
  border-radius: 6px;
}

after:

.foo {
  color: white;
  position: relative; 
}

.foo::before {
  border: 1px solid red;
}

.foo::before {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
  font-size: 100px;
}

/* dpr is 2 */

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
  .foo::before {
    transform: scale(0.5);
    transform-origin: 0 0;
    width: 200%;
    height: 200%;
    font-size: 200px;
    border-radius: 12px;
  }
}

/* dpr is 3 */

@media only screen and (-webkit-min-device-pixel-ratio: 3), 
only screen and (min-device-pixel-ratio: 3) {
  .foo::before {
    transform: scale(0.333333);
    transform-origin: 0 0;
    width: 300%;
    height: 300%;
    font-size: 300px;
    border-radius: 18px;
  }
}

Install

npm install --save-dev postcss-retina-1px

Usage

postcss([ require('postcss-retina-1px') ])

Default Options:

{
  radiusUnit: 'px' /*border-radius unit(only deal with this unit)*/
}

Notice

  • make sure your box is not a pseudo-class.
/* WILL NOT to be transformed */
.wrong::before {
  border: 1em;
}
/* WILL NOT to be transformed */
.wrong::after {
  border: 1em;
}
  • make sure your border use 1px
/* WILL be transformed */
.right {
  border: 1px;
}
/* WILL NOT be transformed */
.wrong {
  border: 1em;
}
  • border-radius will not be transformed if there is not a border declare in same rule.
.foo {
  border: 1px solid red;
}
.bar {
  /* radius WILL NOT to be transformed */
  border-radius: 2px;
}
.foo {
  border: 1px solid red;
  /* radius WILL to be transformed */
  border-radius: 2px;
}
  • if your don't need transform any border, try to do like:
.foo {  
  border: 1px solid red; /*no*/ 
}

See PostCSS docs for examples for your environment.

About

参考自:https://github.com/Ziphwy/postcss-retina (修改内容:1.只针对border 1px做处理; 2.修复border-radius单位问题)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published