Generate media-queries, show screen sizes width and link to a list of media-queries snippets.

Latest Version

Version
1.2
Update
June 5, 2013
Size
15.03KiB
Developer
Category
Users
1,000+
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English (United States)
See more
Permissions
Http://*/*
Https://*/*
See more

Breakpoint media-queries Extension

The extension generates media-queries for using max-width, helps you see the current screen size width and link you to a list of media-queries snippets.

1. Add the extension to your Google Chrome browser.
2. Start resize your window and see where your content are breaking.
3. Click into the Breakpoint icon.
4. Click \"generate code\".
5. Copy the code generated.
6. Past into your style sheets.

Pretty simple and useful.

Version 1.0:
- removed Jquery
- re-built with vanilla javascript

Version 0.7:
- Design improvements.

Version 0.6:
- Design improvements.

Version 0.5:
- Added external link to media-queries snippets with a bunch of devices.
- Design improvements.

Version 0.4:
- update from min-width to max-width.

Version 0.3:
- icon updated.

Credits:
Thanks to David Nemes for the Media-Queries Snippets.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx","manifest_version": 2,"name": "Breakpoint media-queries","version": "1.2","description": "Generate media-queries, show screen sizes width and link to a list of media-queries snippets.","permissions": ["http://*/*","https://*/*"],"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}}
Read more

Similar Extensions

icon

Seesponsive Extension · Developer Tools 1,000+ 2 ★ 50.46KiB

icon

Responsive Inspector Reloaded Extension · Developer Tools 1,000+ 13 ★ 499KiB

icon

Responswitch Extension · Developer Tools 1,000+ 2 ★ 55.49KiB

icon

Grid Ruler Extension · Developer Tools 1,000+ 335 ★ 288KiB

icon

Tailwind CSS Media Query Inspector Extension · Developer Tools 1,000+ 4 ★ 631KiB

icon

Viewport Dimensions Extension · Developer Tools 1,000+ 158 ★ 48.58KiB

icon

Viewport Resizer: Ultimate Device Emulator & Website Testing Tool Extension · Developer Tools 1,000+ 277 ★ 143KiB

icon

Viewport Detector Extension · Developer Tools 1,000+ 3 ★ 153KiB

icon

Responsive Window Extension · Developer Tools 1,000+ 9 ★ 5.38KiB

icon

Breakpoint Extension · Developer Tools 1,000+ 31 ★ 8.21KiB

icon

Bootstrap Viewport Extension · Developer Tools 1,000+ 22 ★ 118KiB

icon

Bootstrap resize tool Extension · Developer Tools 1,000+ 11 ★ 45.39KiB

icon

CSS Used Extension · Developer Tools 1,000+ 184 ★ 164KiB

icon

Emmet Re:view Extension · Developer Tools 1,000+ 162 ★ 74.65KiB

icon

CSSViewer Extension · Developer Tools 1,000+ 371 ★ 301KiB

icon

Width and Height Display Extension · Developer Tools 1,000+ 34 ★ 17.87KiB

icon

Responsive Viewer Extension · Developer Tools 1,000+ 298 ★ 639KiB

icon

Dimensions Extension · Developer Tools 1,000+ 454 ★ 17.28KiB

icon

Screen Size Extension · Productivity 1,000+ 15 ★ 19.14KiB

icon

Web Developer Checklist Extension · Developer Tools 1,000+ 54 ★ 32.65KiB

icon

Live editor for CSS, Less & Sass - Magic CSS Extension · Developer Tools 1,000+ 266 ★ 2.15MiB

icon

Live CSS Editor Extension · Developer Tools 1,000+ 182 ★ 24.38KiB

icon

Window Resizer Extension · Developer Tools 1,000+ 2278 ★ 503KiB

icon

Dimensions Inspect | Gridman Extension · Developer Tools 1,000+ 87 ★ 816KiB

User reviews

icon

Norbert Akonsi (ID: 000000c572e7f0a7) Voted 5 ★ - Updated 10/03/2019 Love it, great results