diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md
index 68f78fd03ba149ca4cb492d64fcd0e3a31665036..35a4ecbd9284b9ebaa0e8e7244372293240321dd 100644
--- a/docs/component/_sidebar.md
+++ b/docs/component/_sidebar.md
@@ -6,6 +6,7 @@
* [movable-view](component/movable-view.md?id=movable-view)
* [cover-view](/component/cover-view?id=cover-view)
* [cover-image](/component/cover-view?id=cover-image)
+ * [match-media](/component/match-media.md)
* 基础内容
* [icon](component/icon.md)
* [text](component/text.md)
@@ -88,86 +89,86 @@
* [配置小程序插件](component/mp-weixin-plugin.md)
* [原生组件说明](component/native-component.md)
-
+
diff --git a/docs/component/match-media.md b/docs/component/match-media.md
new file mode 100644
index 0000000000000000000000000000000000000000..9bb2d6d110b5229081bab85d5c584d2029730cd5
--- /dev/null
+++ b/docs/component/match-media.md
@@ -0,0 +1,36 @@
+#### match-media
+
+media query 匹配检测节点。
+
+可以指定一组 media query 规则,满足时,这个节点才会被展示。
+通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
+
+**属性说明**
+
+|属性名|类型|默认值|必填|说明|平台差异说明|
+|:-|:-|:-|:-|:-|:-|
+|min-width|number||否|页面最小宽度( px 为单位)||
+|max-width|number||否|页面最大宽度( px 为单位)||
+|width|number||否|页面宽度( px 为单位)||
+|min-height|number||否|页面最小高度( px 为单位)||
+|max-height|number||否|页面最大高度( px 为单位)||
+|height|number||否|页面高度( px 为单位)||
+|orientation|string||否|屏幕方向( landscape 或 portrait )||
+
+**match-media 示例**
+
+以下示例代码,推荐使用HBuilderX,新建uni-app项目,可直接体验完整示例。
+```html
+
+
+
+
+ 当页面最小宽度 375, 页面宽度最大 800,且屏幕方向时显示
+
+
+
+ 当页面高度不小于 400 px 且屏幕方向为纵向时展示这里
+
+
+
+```