Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Quick MediaNew to Visual Studio Code? Get it now.

Quick Media

YK911

|
63 installs
| (4) | Free
An extension to write the media queries in short way
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Quick Media

To all the Frontend Developers out there, We have came up with the solution called "Quick Media" to write the media queries in more faster and convinient way than usual. As we all know, maintaining the responsiveness of website, sometimes we need the help of media queries. And Quick Media will surely help you out to achieve the same.

Features


There are four keys this extension mainly provides.

  1. min-query
  2. max-query
  3. in-query
  4. retina-query

Usage


For navigation use TAB button

Quick Query

Overview


min-query

@media only screen and (min-width: 480px) {
  ...;
}

max-query

@media only screen and (max-width: 767px) {
  ...;
}

in-query

Above key will generate following css code

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  ...;
}

retina-query

Above key will generate following css code

@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  ...;
}

Installation


You can simply install Quick Media on your machine.

Or

Open the extension tab in VS Code and search for Quick Media.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft