项目作者: xelaok

项目描述 :
CSS media queries in Svelte
高级语言: Svelte
项目地址: git://github.com/xelaok/svelte-media-query.git
创建时间: 2019-09-04T14:17:41Z
项目社区:https://github.com/xelaok/svelte-media-query

开源协议:MIT License

下载


svelte-media-query (npm, demo)

CSS media queries in svelte.

Installation

  1. npm i svelte-media-query

Usage

  1. <script>
  2. import MediaQuery from "svelte-media-query";
  3. </script>
  4. <MediaQuery query="(min-width: 1281px)" let:matches>
  5. {#if matches}
  6. <div class="root default">
  7. default
  8. </div>
  9. {/if}
  10. </MediaQuery>
  11. <MediaQuery query="(min-width: 481px) and (max-width: 1280px)" let:matches>
  12. {#if matches}
  13. <div class="root tablet">
  14. tablet
  15. </div>
  16. {/if}
  17. </MediaQuery>
  18. <MediaQuery query="(max-width: 480px)" let:matches>
  19. {#if matches}
  20. <div class="root mobile">
  21. mobile
  22. </div>
  23. {/if}
  24. </MediaQuery>