@aceandtate/breakpoints 中文文档教程

Question

@aceandtate/breakpoints

王牌 & Tate 的网站断点

Installation

$ npm install --save @aceandtate/breakpoints

How does it work

此包导出各种形式的断点，供 Ace & 使用。 Tate

Sizes

import { sizes } from "@aceandtate/breakpoints";

/*
sizes = {
  "tiny": 540,
  "small": 768,
  "large": 1000,
  "xlarge": 1400,
  "xxlarge": null
}
*/

Rules

import { rules } from "@aceandtate/breakpoints";

/*
rules = {
  "tiny": "(max-width: 540px)",
  "tinyMax": "(max-width: 540px)",
  "small": "(min-width: 541px) and (max-width: 768px)",
  "smallMin": "(min-width: 541px)",
  "smallMax": "(max-width: 768px)",
  ... large, xlarge, xxlarge
}
*/

Breakpoints

import { breakpoints } from "@aceandtate/breakpoints";

/*
breakpoints = {
  "tiny": {
    "min": 0,
    "max": 540
  },
  "small": {
    "min": 541,
    "max": 768
  },
  "large": {
    "min": 769,
    "max": 1000
  },
  "xlarge": {
    "min": 1001,
    "max": 1400
  },
  "xxlarge": {
    "min": 1401
  }
}
*/

Usage with Styled Components

import styled from "styled-components";
import { tiny, smallMin } from "@aceandtate/breakpoints/rules";

const myComponent = styled.div`
  @media ${tiny} {
    /* Show on mobile devices */
    width: 100%;
    margin: 10px;
  }
  @media ${smallMin} {
    /* Everything else */
    width: 400px;
    margin: 0 auto;
  }
`;

Development

如果要更新或添加断点，可以在 ./sizes.json 中执行，然后运行：

$ npm run generate

This will then update the files in ./build/ 相应的文件。 请注意，此任务会在将包发布到 NPM 之前自动运行。

Shoutouts

• https://github.com/Travix-International/travix-breakpoints

License

麻省理工学院 © Ace & 泰特