Styled-px2rem NPM

styled-px2rem ✨

Extension of styled-components with features for convert px to rem units.

Check the documentation at styled-components.com/docs for more information about using styled-components!

Important

Based on 750px design draft.

We suposse 100px = 1rem when screen width is 750px, so 750px would be 7.5rem.

When the screen width is 375px, like iPhone 6, the font-size in html tag should be 50px, still, 7.5rem would be 375px, which equals to the screen width.

Inspriation

Inspired by styled-px2vw, without which there would be no such the styled-px2rem.

Features

Suitable for mobile
Supports Adapting based on props
Supports Extending Styles
Supports .attrs constructor

Installation

yarn:

yarn add styled-px2rem

npm:

npm i --save styled-px2rem

Usage

Just change module styled-components to styled-px2rem.

import styled, { keyframes, ... } from 'styled-components';

const keyFrame = keyframes`
  0% {
    width: 100px;
    background: yellow;
  }
  100% {
    width: 400px;
    background: purple;
  }
`;

export default Box = styled.div`
  display: inline-block;
  height: 200px;
  margin-bottom: 50px;
  color: #fff;
  line-height:200px;
  font-size: ${props => props.large ? '50px' : '30px'};
  transition: transform 300ms ease-in-out;
  animation: ${keyFrame} 2s ease-in-out 0s infinite;
`

import styled, { keyframes, ... } from 'styled-px2rem';

const keyFrame = keyframes`
  0% {
    width: 100px;
    background: yellow;
  }
  100% {
    width: 400px;
    background: purple;
  }
`;

export default Box = styled.div`
  display: inline-block;
  height: 200px;
  margin-bottom: 50px;
  color: #fff;
  line-height:200px;
  font-size: ${props => props.large ? '50px' : '30px'};
  transition: transform 300ms ease-in-out;
  animation: ${keyFrame} 2s ease-in-out 0s infinite;
`