Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @marko-tags/match-media with all npm packages installed. Try it out:

@marko-tags/match-media lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

require("marko/package.json"); // marko is a peer dependency. // require("@marko-tags/match-media/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@marko-tags/match-media v1.1.1

Media queries directly in your Marko templates.

API Stability NPM Version Downloads

Media queries directly in your Marko templates.

Note: version 1.0.0 of this module requires Marko >= 4.14.20 as it uses the new tag parameter syntax


npm install @marko-tags/match-media


<match-media|{ mobile, tablet, desktop }|
  mobile="(max-width: 767px)"
  tablet="(min-width: 768px) and (max-width: 1024px)"
  desktop="(min-width: 1025px)"

    <!-- Mobile version -->
    <!-- Tablet version -->
    <!-- Desktop version -->
    <!-- Handle server side render (no media queries match) -->


Full media query support

<match-media|{ portrait, landscape }|
  portrait="(orientation: portrait)"
  landscape="(orientation: landscape)"

  <!-- Render based on portrait or landscape -->

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free