responsive-debug
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Responsive Debug

Build Status NPM

The simple utility to debug a responsive layout. It allows:

  • Display current window width
  • Display current root element font size (useful for rem/em)
  • Display current responsive break

Usage

  1. Install the package:
> npm install responsive-debug
  1. Add debug overlay to your website
import enableDebug from 'responsive-debug';
 
enableDebug([
    {
        name: 'xlg',
        mediaQuery: 'screen and (min-width: 120em)'
    },
    {
        name: 'lg',
        mediaQuery: 'screen and (min-width: 89em) and (max-width: 119.99em)'
    },
    {
        name: 'md',
        mediaQuery: 'screen and (min-width: 84em) and (max-width: 88.99em)'
    },
    {
        name: 'sm',
        mediaQuery: 'screen and (min-width: 40em) and (max-width: 83.99em)'
    },
    {
        name: 'xs',
        mediaQuery: 'screen and (min-width: 30em) and (max-width: 39.99em)'
    },
    {
        name: 'xxs',
        mediaQuery: 'screen and (max-width: 29.99em)'
    }
]);

enableDebug function acceppts array of objects that contains name and mediaQuery params. They will be used to display current responsive break.

License

The project is released under the MIT License.

Package Sidebar

Install

npm i responsive-debug

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

8.62 kB

Total Files

6

Last publish

Collaborators

  • sergeyzwezdin