styled-media-query

styled-media-query

美观的媒体查询比 CSS @media 更好,适用于 styled-components,可指定自定义分割点。 别忘了点赞 我们正在努力为 styled-media-query 添加更多功能和定制选项！ 注: 本文档是针对最新版本 (v2) 的,我们仍然支持 v1 语法,但将在 v3 中移除。 特点:

• 自定义断点
• 自定义尺寸单位 (px、em、rem)
• 为每个分段设置了令人惊叹的 min-width 和 max-width 语法
• 使用标记化模板字面量,语法与 styled-components 相同
• 可以将 px 转换为 rem 或 em

开始

• 安装

• 使用 - 开始使用

• 概念

• API

• 标记模板字面量的解释

• lessThan(breakpoint | size)

• greaterThan(breakpoint | size)

• between(firstBreakpoint | firstSize, lastBreakpoint | lastSize)

基本示例

这个示例可能会解释大部分库的内容。您可以使用这些方法来编写不同类型的媒体查询，例如：

import styled from "styled-components"; // 你也需要这个
从 "styled-media-query" 导入媒体
const Box = styled.div`
背景: 黑色;
${media.lessThan("medium")`
/* 屏幕宽度小于 768px (中等) *

[]()
[]()
[]() [](https://github.com/morajabi/with-coffee) [](https://github.com/morajabi/with-coffee)