diff --git a/src/App.vue b/src/App.vue
index 04e3793..7629b80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,16 @@
 </template>
 
 <script>
+import enquireScreen from './utils/device'
+
 export default {
-  name: 'App'
+  name: 'App',
+  created () {
+    let _this = this
+    enquireScreen(isMobile => {
+      _this.$store.commit('setting/setDevice', isMobile)
+    })
+  }
 }
 </script>
 
diff --git a/src/store/index.js b/src/store/index.js
index 04274a0..1605b0b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import account from './modules/account'
+import setting from './modules/setting'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    account
+    account,
+    setting
   }
 })
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
new file mode 100644
index 0000000..0a5da4f
--- /dev/null
+++ b/src/store/modules/setting.js
@@ -0,0 +1,11 @@
+export default {
+  namespaced: true,
+  state: {
+    isMobile: false
+  },
+  mutations: {
+    setDevice (state, isMobile) {
+      state.isMobile = isMobile
+    }
+  }
+}
diff --git a/src/utils/device.js b/src/utils/device.js
new file mode 100644
index 0000000..c71510e
--- /dev/null
+++ b/src/utils/device.js
@@ -0,0 +1,15 @@
+import enquireJs from 'enquire.js'
+
+const enquireScreen = function (call) {
+  const hanlder = {
+    match: function () {
+      call && call(true)
+    },
+    unmatch: function () {
+      call && call(false)
+    }
+  }
+  enquireJs.register('only screen and (max-width: 767.99px)', hanlder)
+}
+
+export default enquireScreen
diff --git a/src/utils/utils.less b/src/utils/utils.less
new file mode 100644
index 0000000..79f5032
--- /dev/null
+++ b/src/utils/utils.less
@@ -0,0 +1,48 @@
+.textOverflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  overflow: hidden;
+  position: relative;
+  line-height: 1.5em;
+  max-height: @line * 1.5em;
+  text-align: justify;
+  margin-right: -1em;
+  padding-right: 1em;
+  &:before {
+    background: @bg;
+    content: '...';
+    padding: 0 1px;
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+  }
+  &:after {
+    background: white;
+    content: '';
+    margin-top: 0.2em;
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+  }
+}
+
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+  &:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0;
+  }
+}