我們在進行前端開發中必然會遇到PC與移動端的適配，面對這樣的問題有些公司會準備兩個頁面，移動是移動，PC是PC，而響應式佈局就是根據使用者不同的機型展示不同的頁面，廢話不多說，直接貼程式碼www.cppcns.com

首先我們這個功能是藉助vuex實現的，沒下載的小夥伴可以先下一個

yarn add vuex

既然是響應式佈局就要準備兩套css，一個是PC端的css，一個是移動端的css，我們暫且將PC端的樣式稱為computer，移動端的樣式稱為mobile

我們首先要做的就是當前螢幕的寬度

state: {
  screenWidth: document.documenwww.cppcns.com
 
tElement.clientWidth,screenHeight: document.documentElement.clientHeight
 }

這是vuex的state，我們後續還要實時監控螢幕寬度，所以還需要提供一個改變screenWidth的方法，於是我又寫了一mutations

mutations: {
  setWidth (state,value) {
   state.screenWidth = value
  },setHeight (state,value) {
   state.screenHeight = value
  }
 }

這樣我們的vuex的檔案就寫好了，而後就是APP.vue,我們需要在這個檔案下新增一個wind

import { mapState,mapMutations } from 'vuex'

在mounted鉤子函式中新增事件

mounted () {
  wiwww.cppcns.comndow.onresize = () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}

這樣好比說我們網頁中的導航，移動端時我們需要它在底部，PC端時我們需要它在頂部，這樣我們就可以在nav.vue這個元件中用watch或computed監聽screenWidth的值，這裡我們用的是computed

<ul :class="computedPhone">//根據screenWidth提供不同的class名
   <router-link to='/file' tag="li" active-class="active">電影</router-link>
   <router-link to='/cinma' tag="li" acyCIEHLXbFNtive-class="active">影院</router-link>
   <router-link to='/center' tag="li" active-class="active">個人中心</router-link>
</ul>

computed: {
  ...mapState('stylesheet',['screenWidth']),computedPhone () {
   if (this.screenWidth < 1024) {
    return 'mobile'
   } else {
    return 'computer'
   }
  }
 }

這樣只要寫好兩套css就可以實現響應式佈局了

到此這篇關於vue-cli中實現響應式佈局的方法的文章就介紹到這了,更多相關vue-cli 響應式佈局內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！