视口是一个模块，用于响应浏览器视口大小的更改。它注册了自己的数据模块，更新以响应浏览器媒体对一组受支持的标准断点的查询。这些数据和包含的高阶组件可以在您自己的模块和组件中使用，以实现与viewport相关的行为。
安装模块
npm install@wordpress/viewport--保存
此包假定您的代码将在2015年欧洲标准+环境。如果您使用的环境对此类语言功能和API的支持有限或不支持，您应该包括polyfill发货@wordpress/babel预设在代码中。
断点阈值的标准设置如下：
| 姓名 |
像素宽度 |
巨大的 |
1440 |
宽的 |
1280 |
大的 |
960 |
中等的 |
782 |
小的 |
600 |
可移动的 |
480 |
Viewport模块在核心/视口数据命名空间，并从包中公开为商店.
从“@wordpress/data”导入{select}；从“@wordpress/viewport”导入{store}；const isSmall=选择（存储）.isViewportMatch（“<中等”）；
这个isViewportMatch（视点匹配）选择器接受单个字符串参数查询。它由可选运算符和断点名称组成，用空格分隔。操作员可以<或>=，默认为>=.
从“@wordpress/data”导入{select}；从“@wordpress/viewport”导入{store}；const｛isViewportMatch｝=选择（存储）；const isSmall=isViewportMatch（'<medium'）；const isWideOrHuge=isViewportMatch（'>=宽'）；//等价物：//const isWideOrHuge=isViewportMatch（“宽”）；
此软件包提供了一组HOC来编写其行为应随视口的不同而变化的组件。
如果视口匹配
高阶组件创建者，创建一个新组件，在满足视口查询时进行渲染。
相关的
用法
函数MyMobileComponent（）{return<div>我只在移动视口上渲染</div>；}MyMobileComponent=ifViewportMatches（'<small'）（MyMobileComponent）；
参数
退换商品
商店
存储视口名称空间的定义。
相关的
类型
带ViewportMatch
高阶组件创建者，创建一个使用给定属性名称呈现的新组件，其中传递给基础组件的值是指定为对象值的查询的结果。
相关的
用法
函数MyComponent（{isMobile}）{return当前：{isMobile？'Mobile'：'Not Mobile'}；}MyComponent=withViewportMatch（{isMobile:'<small'}）（MyComponents）；
参数
退换商品
这是古腾堡项目的一部分。该项目组织为单回购。它由多个独立的软件包组成，每个包都有特定的用途。此monorepo中的包发布到净现值法并由使用WordPress（文字出版社）以及其他软件项目。
要了解更多关于对这个包或古腾堡整体贡献的信息，请阅读该项目的主要内容投稿人指南.