diff --git a/packages/uni-cli-shared/components/uni-match-media.vue b/packages/uni-cli-shared/components/uni-match-media.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d01803eb0dc9a96699551afe6599e7b697f087d8
--- /dev/null
+++ b/packages/uni-cli-shared/components/uni-match-media.vue
@@ -0,0 +1,75 @@
+<template>
+  <view
+    v-show="matches"
+  > 
+    <slot />
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'UniMatchMedia',
+  props: {
+    width: {
+      type: [Number, String],
+      default: ''
+    },
+    minWidth: {
+      type: [Number, String],
+      default: ''
+    },
+    maxWidth: {
+      type: [Number, String],
+      default: ''
+    },
+    height: {
+      type: [Number, String],
+      default: ''
+    },
+    minHeight: {
+      type: [Number, String],
+      default: ''
+    },
+    maxHeight: {
+      type: [Number, String],
+      default: ''
+    },
+    orientation: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      matches: false
+    }
+  },
+
+  mounted() {
+    const mediaQ = uni.createMediaQueryObserver()
+    mediaQ.observe({
+        width: this.width,
+        maxWidth: this.maxWidth,
+        minWidth: this.minWidth,
+        height: this.height,
+        minHeight: this.minHeight,
+        maxHeight: this.maxHeight,
+        orientation: this.orientation
+      }, matches => {
+        this.matches = matches
+      })
+  },
+
+}
+</script>
+
+<style>
+  view {
+    display: block;
+  }
+
+  view[hidden] {
+    display: none;
+  }
+</style>
diff --git a/src/platforms/mp-alipay/runtime/api/index.js b/src/platforms/mp-alipay/runtime/api/index.js
index d55421ec1e4239d15945e24e8d87b529eed04944..bd3b756fbc02337ae11b0aa2e636b5df45a1be70 100644
--- a/src/platforms/mp-alipay/runtime/api/index.js
+++ b/src/platforms/mp-alipay/runtime/api/index.js
@@ -1,3 +1,4 @@
+import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
 import {
   isFn,
   hasOwn
@@ -104,3 +105,5 @@ export function createIntersectionObserver (component, options) {
   }
   return my.createIntersectionObserver(options)
 }
+
+export { createMediaQueryObserver }
\ No newline at end of file
diff --git a/src/platforms/mp-baidu/runtime/api/index.js b/src/platforms/mp-baidu/runtime/api/index.js
index b541945022da268b65474778bcdf530a8dca7fa7..82f98cdcb9fc228f5a187ca0f9310cf113246aea 100644
--- a/src/platforms/mp-baidu/runtime/api/index.js
+++ b/src/platforms/mp-baidu/runtime/api/index.js
@@ -1,3 +1,5 @@
+import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
+
 export function requestPayment (params) {
   let parseError = false
   if (typeof params.orderInfo === 'string') {
@@ -15,3 +17,5 @@ export function requestPayment (params) {
     swan.requestPolymerPayment(params)
   }
 }
+
+export { createMediaQueryObserver }
\ No newline at end of file
diff --git a/src/platforms/mp-qq/runtime/api/index.js b/src/platforms/mp-qq/runtime/api/index.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..141468c0e6ddf585683eca464dad1c48f9948124 100644
--- a/src/platforms/mp-qq/runtime/api/index.js
+++ b/src/platforms/mp-qq/runtime/api/index.js
@@ -0,0 +1,3 @@
+import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
+
+export { createMediaQueryObserver }
\ No newline at end of file
diff --git a/src/platforms/mp-toutiao/runtime/api/index.js b/src/platforms/mp-toutiao/runtime/api/index.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..141468c0e6ddf585683eca464dad1c48f9948124 100644
--- a/src/platforms/mp-toutiao/runtime/api/index.js
+++ b/src/platforms/mp-toutiao/runtime/api/index.js
@@ -0,0 +1,3 @@
+import createMediaQueryObserver from '../../../mp-weixin/helpers/create-media-query-observer'
+
+export { createMediaQueryObserver }
\ No newline at end of file
diff --git a/src/platforms/mp-weixin/helpers/create-media-query-observer.js b/src/platforms/mp-weixin/helpers/create-media-query-observer.js
new file mode 100644
index 0000000000000000000000000000000000000000..00b8265a5849191ed70b7d69cda5aad2a1757964
--- /dev/null
+++ b/src/platforms/mp-weixin/helpers/create-media-query-observer.js
@@ -0,0 +1,91 @@
+export default function createMediaQueryObserver () {
+    const mediaQueryObserver = {}
+    const {
+      windowWidth,
+      windowHeight
+    } = __GLOBAL__.getSystemInfoSync()
+  
+    const orientation = windowWidth < windowHeight ?  'portrait' : 'landscape'
+  
+    mediaQueryObserver.observe = (options, callback) => {
+      let matches = false
+      for (const item in options) {
+        const itemValue = item === 'orientation' ? options[item] : Number(options[item])
+        if (options[item] !== '') {
+          if (item === 'width'){
+            if (itemValue == windowWidth) {
+              matches = true
+            } else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+          if (item === 'minWidth'){
+            if (windowWidth >= itemValue) {
+              matches = true
+            } else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+          if (item === 'maxWidth'){
+            if (windowWidth <= itemValue) {
+              matches = true
+            } else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+          
+          if (item === 'height'){
+            if (itemValue == windowHeight) {
+              matches = true
+            } else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+          if (item === 'minHeight'){
+            if (windowHeight >= itemValue) {
+              matches = true
+            } else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+          if (item === 'maxHeight'){
+            if (windowHeight <= itemValue) {
+              matches = true
+            } else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+    
+          if (item === 'orientation'){
+            if (options[item] === orientation) {
+              matches = true
+            }  else {
+              matches = false
+              callback(matches)
+              return matches
+            }
+          }
+        }
+      }
+      callback(matches)  
+      
+      return matches
+    }
+ 
+    mediaQueryObserver.disconnect = () => {
+    }
+    
+    return mediaQueryObserver
+}
\ No newline at end of file