Media queries directly in your Marko templates.


15101.2.18 months ago3 years agoMinified + gzip package size for @marko-tags/match-media in KB


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 -->


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.