5in4/Styled-Responsive-Media-Queries

Styled Components Responsive Media Queries — Standard size from Chrome DevTools

Styled-Responsive-Media-Queries styled-rmq

Styled Components Responsive Media Queries — Standard sizes from Chrome DevTools.

Getting Started

Step #0

Install styled-components in your project.

npm i -S styled-components

Step #1

Install styled-rmq in your project.

npm i -S styled-rmq

Step #2

Import both.

import styled from 'styled-components';
import rmq from 'styled-rmq';

const YourComponent = styled.div`
    background: tomato;

    /* XL: 4K 2560px */
    ${rmq('xl')} { background: hotpink; }

    /* ll: Laptop Large 1440px */
    ${rmq('ll')} { background: hotpink; }

    /* ls: Laptop 1024px */
    ${rmq('ls')} { background: hotpink; }

    /* t: Tablet 768px */
    ${rmq('t')}  { background: hotpink; }

    /* ml: Mobile Large 425px */
    ${rmq('ml')} { background: hotpink; }

    /* mm: Mobile Mediun 375px */
    ${rmq('mm')} { background: hotpink; }

    /* ms: Mobile Small 320px */
    ${rmq('ms')} { background: hotpink; }

    /**
     *  Custom Media Queries
     * — Think of elements instead of size
     * — Make them look good on all sizes.
     *
     * E.g. Small tablet size 585px.
    */
    ${rmq('585')} { background: hotpink; }
`;

export default (
  <YourComponent>Being Used Here!</YourComponent>
);

Some Context + Examples

All of the sizes used in the responsive media queries in styled-rmq come directly from the Chrome Dev Tools. I prefer px and don't use em for media queries. I'll collect a list of sites using this package below.

• VSCode Power User Course →

Changelog →

All notable changes in this project's released versions are documented in the changelog file.

License

MIT ⓒ Ahmad Awais. Follow me on Twitter @MrAhmadAwais →