@-ui/mq 中文文档教程

发布于 5年前 浏览 52 项目主页 更新于 3年前


@-ui/mq

捆绑恐惧症 Types 代码覆盖率 构建状态 NPM 版本 MIT 许可证

npm i @-ui/mq

用于将存储的媒体查询和断点添加到 -ui 样式

Quick Start

import mq from '@-ui/mq'
import styles from '@-ui/styles'

const breakpoint = mq({
  // 0px
  phone: 'only screen and (min-width: 0em)',
  // 560px
  tablet: 'only screen and (min-width: 35em)',
  // 1280px
  desktop: 'only screen and (min-width: 80em)',
})

const responsiveBox = styles({
  default: `
    display: block;
    background: #000;
    width: 400px;
    height: 400px;
  `,
  big: breakpoint({
    default: `
      width: 800px;
      height: 800px;
    `,
    desktop: `
      width: 1000px;
      height: 1000px;
    `,
  }),
  small: `
    width: 300px;
    height: 300px;

    ${breakpoint('phone')} {
      width: 200px;
      height: 200px;
    }
  `,
})

API

LICENSE

MIT的实用函数


@-ui/mq

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @-ui/mq

A utility function for adding stored media queries and breakpoints to -ui styles

Quick Start

import mq from '@-ui/mq'
import styles from '@-ui/styles'

const breakpoint = mq({
  // 0px
  phone: 'only screen and (min-width: 0em)',
  // 560px
  tablet: 'only screen and (min-width: 35em)',
  // 1280px
  desktop: 'only screen and (min-width: 80em)',
})

const responsiveBox = styles({
  default: `
    display: block;
    background: #000;
    width: 400px;
    height: 400px;
  `,
  big: breakpoint({
    default: `
      width: 800px;
      height: 800px;
    `,
    desktop: `
      width: 1000px;
      height: 1000px;
    `,
  }),
  small: `
    width: 300px;
    height: 300px;

    ${breakpoint('phone')} {
      width: 200px;
      height: 200px;
    }
  `,
})

API

LICENSE

MIT

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文