@marko-tags/match-media
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
Installation
npm install @marko-tags/match-mediaExample
<match-media|{ mobile, tablet, desktop }|
mobile="(max-width: 767px)"
tablet="(min-width: 768px) and (max-width: 1024px)"
desktop="(min-width: 1025px)"
>
<if(mobile)>
<!-- Mobile version -->
<else-if(tablet)>
<!-- Tablet version -->
</else-if>
<else-if(desktop)>
<!-- Desktop version -->
</else-if>
<else>
<!-- Handle server side render (no media queries match) -->
</else>
</match-media>Full media query support
<match-media|{ portrait, landscape }|
portrait="(orientation: portrait)"
landscape="(orientation: landscape)"
>
<!-- Render based on portrait or landscape -->
</match-media>