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

Command	Description
`BreakpointLens: Open Breakpoint Visualizer`	Open the interactive viewport ruler panel
`BreakpointLens: Visualize This Breakpoint`	Open the panel focused on a specific query (also available as a CodeLens)
`BreakpointLens: Toggle Inline Breakpoint Info`	Show or hide the after-line annotations

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 - [email protected]

License

MIT

BreakpointLens