BreakpointLens

Understand responsive CSS at a glance. BreakpointLens resolves every @media query in your stylesheets to a concrete pixel range and device class, shows it inline next to the code, and visualizes all breakpoints on an interactive viewport ruler - no browser needed.

Features

Inline breakpoint info

Every @media line gets an after-line annotation showing its resolved range and device class, for example:

@media (min-width: 768px) and (max-width: 1023px) { ... }   768px -> 1023px | Tablet
@media (width >= 1440px) { ... }                             1440px+ | Desktop
@media (max-width: 40em) { ... }                             0px -> 640px | Mobile

The parser understands:

• min-width / max-width in px, em, and rem (em/rem are converted at a 16px base)
• Modern range syntax: width >= 768px, 768px <= width, 400px <= width <= 700px, <, >, and =
• orientation: portrait | landscape and prefers-color-scheme: dark | light
• Conditions combined with and, plus comma-separated query lists
• CSS, SCSS, and LESS files, and <style> blocks inside HTML, Vue, and Svelte files

Breakpoint Visualizer panel

Run BreakpointLens: Open Breakpoint Visualizer to open a panel with:

• A horizontal pixel ruler (0 -> 1920px and beyond) with device class bands
• One colored bar per media query showing exactly where it is active
• An overlap density strip revealing where multiple queries apply at once
• A draggable viewport-width cursor plus slider and numeric input; queries active at the chosen width light up in the panel and the matching @media lines are temporarily highlighted in the editor
• Device presets: iPhone 375, iPad 768, Laptop 1280, Desktop 1920
• Click any query row to jump to its line in the editor

The panel updates live as you edit or switch between files.

CodeLens

Each @media line gets a Visualize this breakpoint CodeLens that opens the panel with the viewport cursor already positioned inside that query's range.

Status bar

When a CSS-like file is active, the status bar shows N breakpoints. Hover it to list every resolved range; click it to open the visualizer.

Commands

Configuration

{
  "breakpointLens.enabled": true,
  "breakpointLens.deviceBoundaries": {
    "mobileMax": 767,
    "tabletMax": 1023,
    "laptopMax": 1439
  }
}

• breakpointLens.enabled - show or hide the inline annotations.
• breakpointLens.deviceBoundaries - upper pixel bounds for the device classes: widths up to mobileMax are Mobile, up to tabletMax are Tablet, up to laptopMax are Laptop, and anything larger is Desktop.

Getting started

The extension ships with a walkthrough: open the Command Palette and run Welcome: Open Walkthrough, then pick Get Started with BreakpointLens.

Requirements

• VS Code 1.85.0 or higher

Author

Kanaihya Kumar - kanaihyakmr@gmail.com

License

MIT