diff --git a/packages/uni-cli-shared/lib/tags.js b/packages/uni-cli-shared/lib/tags.js
index 26dafc56d88ce12590384b380f610068f538fca4..bfcbfd7ec291081cfdb27214b12bbf9433844326 100644
--- a/packages/uni-cli-shared/lib/tags.js
+++ b/packages/uni-cli-shared/lib/tags.js
@@ -40,5 +40,6 @@ module.exports = {
   textarea: ['app-plus', 'mp-weixin', 'h5'],
   video: ['app-plus', 'mp-weixin', 'h5'],
   view: ['app-plus', 'mp-weixin', 'h5'],
-  'web-view': ['app-plus', 'mp-weixin']
+  'web-view': ['app-plus', 'mp-weixin'],
+  'match-media':['app-plus', 'mp-weixin', 'h5']
 }
diff --git a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
index cd89c4f048a5e30a5fe52915b6b856fc04b92e28..90e1f5313c7e82285610ea89fc8d87115e6f3adc 100644
--- a/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
+++ b/packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
@@ -44,7 +44,8 @@ const TAGS = [
   'textarea',
   'video',
   'view',
-  'web-view'
+  'web-view',
+  'match-media'
 ]
 
 const EVENTS = {
diff --git a/packages/uni-template-compiler/lib/mp.js b/packages/uni-template-compiler/lib/mp.js
index f63c8152776e1124ded22f6c03b3b1a855109bec..da2a6d3fc6abbe3cbdd97a169cf27bae204a9408 100644
--- a/packages/uni-template-compiler/lib/mp.js
+++ b/packages/uni-template-compiler/lib/mp.js
@@ -47,7 +47,8 @@ const tags = [
   'video',
   'view',
   'web-view',
-  'editor'
+  'editor',
+  'match-media'
 ]
 
 const baseCompiler = {
@@ -127,4 +128,4 @@ module.exports = function getCompilerOptions (platform) {
   baseCompiler,
   require(id + '/lib/uni.compiler.js')
   )
-}
+}
diff --git a/packages/vue-cli-plugin-uni/packages/postcss/index.js b/packages/vue-cli-plugin-uni/packages/postcss/index.js
index 783e9c2c00f1630d17cad440156fcea7de27d331..7f2d7ec49955ba4f324bfe99d1e5be755918708c 100644
--- a/packages/vue-cli-plugin-uni/packages/postcss/index.js
+++ b/packages/vue-cli-plugin-uni/packages/postcss/index.js
@@ -136,7 +136,8 @@ if (process.env.UNI_USING_V3) {
     'textarea',
     'video',
     'view',
-    'web-view'
+    'web-view',
+    'match-media'
   ]
 
   const BG_PROPS = [
diff --git a/src/core/helpers/tags.js b/src/core/helpers/tags.js
index a485d8a4e5493e7086ea7dc9ccd968e3e43c0d02..cd61792cef48a043c81a2b706a9c410c10b76262 100644
--- a/src/core/helpers/tags.js
+++ b/src/core/helpers/tags.js
@@ -1,10 +1,10 @@
 module.exports = [
-  'uni-app',
-  'uni-layout',
-  'uni-content',
-  'uni-main',
-  'uni-left-window',
-  'uni-right-window',
+  'uni-app',
+  'uni-layout',
+  'uni-content',
+  'uni-main',
+  'uni-left-window',
+  'uni-right-window',
   'uni-tabbar',
   'uni-page',
   'uni-page-head',
@@ -14,7 +14,7 @@ module.exports = [
   'uni-actionsheet',
   'uni-modal',
   'uni-toast',
-  'uni-resize-sensor',
+  'uni-resize-sensor',
   'uni-shadow-root',
 
   'uni-ad',
@@ -57,5 +57,6 @@ module.exports = [
   'uni-textarea',
   'uni-video',
   'uni-view',
-  'uni-web-view'
+  'uni-web-view',
+  'uni-match-media'
 ]
diff --git a/src/core/view/components/match-media/index.vue b/src/core/view/components/match-media/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32ddcb142f26f74c7cd8df49ccaa0cc82e1f7c84
--- /dev/null
+++ b/src/core/view/components/match-media/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <uni-match-media
+    v-show="MediaQueryListRes"
+    v-on="$listeners"
+  >
+    <slot />
+  </uni-match-media>
+</template>
+
+<script>
+export default {
+  name: 'MatchMedia',
+  props: {
+    width: {
+      type: Number,
+      default: 0
+    },
+    minWidth: {
+      type: Number,
+      default: 0
+    },
+    maxWidth: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      default: 0,
+      type: Number
+    },
+    minHeight: {
+      type: Number,
+      default: 0
+    },
+    maxHeight: {
+      type: Number,
+      default: 0
+    },
+    orientation: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      MediaQueryListRes: true,
+      mql: null
+    }
+  },
+
+  computed: {
+    handleMediaQueryStr () {
+      let mediaQueryStr = []
+      const { $props } = this
+      for (const item in $props) {
+        if (item !== ('orientation' || 'animations') && $props[item] > 0) {
+          mediaQueryStr.push(`(${this.humpToLine(item)}: ${this[item]}px)`)
+        }
+        if (item === 'orientation' && $props[item]) {
+          mediaQueryStr.push(`(${this.humpToLine(item)}: ${this[item]})`)
+        }
+      }
+      mediaQueryStr = mediaQueryStr.join(' and ')
+      return mediaQueryStr
+    }
+  },
+
+  watch: {
+    handleMediaQueryStr: 'replaceListener'
+  },
+
+  mounted () {
+    this.mql = window.matchMedia(this.handleMediaQueryStr)
+    this.handleMediaQuery(this.mql)
+    this.mql.addListener(this.handleMediaQuery)
+  },
+
+  beforeDestroy () {
+    this.mql.removeListener(this.handleMediaQuery)
+  },
+
+  methods: {
+    handleMediaQuery (e) {
+      if (e.matches) {
+        this.MediaQueryListRes = true
+      } else {
+        this.MediaQueryListRes = false
+      }
+    },
+
+    humpToLine (name) {
+      return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+    },
+
+    replaceListener () {
+      this.mql.removeListener(this.handleMediaQuery)
+      this.mql = window.matchMedia(this.handleMediaQueryStr)
+      this.handleMediaQuery(this.mql)
+      this.mql.addListener(this.handleMediaQuery)
+    }
+  }
+}
+</script>
+
+<style>
+  uni-match-media {
+    display: block;
+  }
+
+  uni-match-media[hidden] {
+  display: none;
+}
+</style>