``` 通过钩入断点定义, `@artsy/react-responsive-media` 带并宣布: ```js import React from "react" import { Style } from "react-head" import { createMedia } from '@artsy/react-responsive-media' const { MediaContextProvider, Media, createMediaStyle } = createMedia({ breakpoints: { sm: 0, md: 768 lg: 1024, xl: 1192, }, }) const App = () => ( <> ) ``` ### 演示您可以在这个寄存器中找到一个实例, 并像这样在本地运行 : ``` git clone https://github.com/artsy/react-responsive-media.git cd react-responsive-media yarn install yarn example open http://localhost:8080 ``` ### 为什么不有条件地做呢? 其他现有解决办法采取有条件的办法,例如: [`react-responsive`](https://github.com/contra/react-responsive) 或者说 [`react-media`](https://github.com/ReactTraining/react-media),所以在哪里这种做法是否不同? 服务器侧渲染! 但首先,什么是有条件的渲染? 在 " 反应生态系统 " 中,采用共同方法撰写声明性回应组件是使用浏览器 [`matchMedia` api 密码](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)数字 : ```js {({ xs }) => { if (xs) { return } else { return } }} ``` 在客户端上,当给定的断点匹配时有条件地反应树. 然而,在与《公约》和《京都议定书》一起使用时,这种做法有一些缺陷服务器侧渲染( SSR) : - 无法可靠地知道用户当前在服务器渲染相, 因为需要浏览器 . - 基于用户代理嗅探设置断点大小容易出错无法精确匹配设备容量。一个手机设备的像素密度可能大于另一个,移动设备可能适合考虑设备取向时的多个断点,以及桌面客户端根本不可能知道。最好的Devs可以做的是猜测当前断点并填充 `` 假设状态. Artsy决定了什么是最佳的取舍我们接近了问题如下: 1. 给服务器上的所有断点加注并发送下接线. 2. 浏览器收到带有适当媒体查询样式的标记并会立即开始渲染预期 **视觉** 不管结果如何浏览器所在的视图口宽度 . 3. 当所有的JS已经加载和反应开始再水化阶段,我们询问浏览器显示它目前处于什么断点,然后限制输出的组件。防止生命周期方法从隐藏组件中开火和未使用的html写入 DOM. 4. 此外,我们用浏览器登记事件听众,以通知 `MediaContextProvider` 当一个不同的断点匹配,然后使用新值对 `onlyMatch` 道具 (英语). 让我们比较一下组件树使用什么 `matchMedia` 看起来像我们的办法: | 在此之前 | 之后 | | --- | --- | | ```tsx {({ xs }) => { if (xs) return else return }} ``` | ```tsx <> ``` | 完整的例子见\[#server-side-refersing\]\[\]. ## API 密码 ### 创建媒体先为事. 您需要定义所需要的断点和互动用来制作您可以全程使用的一套媒体组件你的申请. 例如,考虑具有下列断点的应用程序: - 1至768分之间的取景口宽度, 命名为 `sm`。。。 . - 宽度介于768至1024分之间, 命名为 `md`。。。 . - 1024至1192分之间的取景口宽度,命名 `lg`。。。 . - 1192分及以上的取景口宽度,命名 `xl`。。。 . 以及下列相互作用: - 支持徘徊指针设备的设备,命名为 `hover`。。。 . - 不支持在指针设备上徘徊的设备,命名 `notHover`。。。 . 然后,您将制作这样的一套媒体组件: ```tsx const MyAppMediaComponents = createMedia({ breakpoints: { sm: 0, md: 768 lg: 1024, xl: 1192, }, interactions: { hover: "(hover: hover)", notHover: "(hover: none)", }, }) ``` 如你所见,断点由它们定义 _开始_ 乘以第一个一个预计在0开始. 再说 `Media` 财务报告和审定财务报表 `MediaContextProvider` 构成部分,a `MediaStyle` 函数,用于所有可能的媒体查询 `Media` 实例可以加以利用。确定插入此选项为 ` ) ``` 最好用自己的模块来设置在您的应用程序中导入 : ```tsx export const { MediaContextProvider, Media, MediaStyle } = MyAppMediaComponents ``` ### 介质连接器这个 `MediaContextProvider` 组件如何影响 `Media` 组件将是: 已经完成. #### 只匹配通过具体说明,可限制特定断点/相互作用要匹配的媒体查询列表。默认 _全部_ {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}会送来的. #### 禁用 Dynamic 媒体查询默认情况下,当提供客户端时,浏览器的 [`matchMedia` api 密码](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 将用来 _进一步_ 限制 `onlyMatch` 列表中仅包含当前匹配的媒体查询。这样做是为了避免触发隐藏组件的相关生命周期钩. 阻止这种行为主要是为了调试目的. ### 媒体这个 `Media` 为您的应用程序创建的组件有几种相互排斥表示您应答的布局。这些道具都根据您提供的指定断点运行创建了媒体组件. 为每个道具使用断点定义提供的例子,定义如下: " 设置 " 部分. #### 时间使用它来宣告儿童只应在特定的断点,指取景口宽度大于或等于开始抵消断点,但小于下一个断点,如果一个已存在. 例如,儿童 `Media` 声明只有在取景口宽度为0至768分: ```tsx ... ``` #### 小谭使用此功能来声明儿童只应在取景口时可见宽度小于指定的断点的起始相冲. 例如,儿童 `Media` 声明只有在取景口宽度为0至1024分: ```tsx ... ``` #### 大调使用此功能来声明儿童只应在取景口时可见宽度大于起始相抵 _下一个_ 断点. 例如,儿童 `Media` 声明只有在视图宽度大于1024分 : ```tsx ... ``` #### 大塔诺平方使用此功能来声明儿童只应在取景口时可见宽度等于指定的断点的起始相抵 _或者说_ 更强. 例如,儿童 `Media` 声明只有在取景口宽度为768分或上: ```tsx ... ``` #### 介于使用此功能来声明儿童只应在取景口时可见宽度等于第一个指定断点的起始相冲,但小于而不是第二个指定断点的起始相冲. 例如,儿童 `Media` 声明只有在取景口宽度为768至1192分: ```tsx ... ``` ## 服务器侧渲染开始 ## 客户端渲染开始 ## Pros对Cons 职业: - 由简单,被证明的技术之上所建:HTML和CSS媒体查询. - 用户在设备的正确断点上看到渲染标记, 甚至在装入反应前 . 计数 : - 现在的页面包括标记 _全部_ 断点,可以增加页面大小. - 当前媒体查询已不再是组件可以访问的;它是仅由道具决定 `` 他们发现自己进去. 最后一个骗局是个有趣的问题我们怎么代表一个在不同断点上不同样式的组件? (让我们想象一下) (单位:千美元) `matchMedia` 实例。 ) ```tsx ``` ```tsx <> {this.getComponent('xs') {this.getComponent() ``` ```tsx getComponent(breakpoint?: string) { const xs = breakpoint === 'xs' return } ``` 我们还在想这个模式,所以请 [告诉我们](https://github.com/artsy/react-responsive-media/issues/new) 如果你有建议的话. ## 发展这个项目使用 [自动释放](https://github.com/intuit/auto-release#readme) 可以在每张公关上自动发布。每个公关应该有一个符合以下内容的标签 - 版本: 三维 - 版本: 补丁 - 版本: 次要 - 版本: 主要主要,次要,和补丁会生成新的发布. 用于破解更改的主要功能,用于新的非破解特性的次要功能, 用于修复错误的补丁。 Trivial不会导致发布,应该在更新文档或非项目代码时被使用. 如果你不想在某一特定的公关上发布但改变不是微不足道的那就用 `Skip Release` 标签与相应的版本标签相并列. ## 常见问题 ### @artsy/react-responsive-media 是什么？对基于媒体查询的CSS响应布局采用宣示性SSD兼容方法\.注意：该包已被作者标记为弃用——WARNING: This project has been renamed to @artsy/fresnel\. ### 如何安装 @artsy/react-responsive-media？在项目目录运行 npm install @artsy/react-responsive-media，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @artsy/react-responsive-media 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @artsy/react-responsive-media 支持 ESM 还是 CommonJS？以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @artsy/react-responsive-media 可以商用吗？ @artsy/react-responsive-media 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @artsy/react-responsive-media 的下载量有多少？根据 npm 官方下载统计，@artsy/react-responsive-media 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,374 次，日均约 79 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @artsy/react-responsive-media 还在维护吗？最新版本 2\.0\.3 发布于 2019/05/23（7 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/10/28。作者已将其标记为弃用，新项目建议寻找替代方案。