一,通過媒體查詢實現響應式(@media)
優點:適用於小型網頁,用戶交互較少的項目,代碼用量較少;
缺點:在頁面內容過多,用戶交互過多的時候,如果通過 @media 來一個個改的話,那代碼量可就很多了,而且也不方便維護。因此需要另一種方式來解決這個問題。
二,通過判斷打開設備的類型,區分需要顯示的方式和界面
//App.vue mounted() { if (this._isMobile()) { alert("手機端"); // this.$router.replace('/m_index'); } else { alert("pc端"); // this.$router.replace('/pc_index'); } }, methods: { //App.vue _isMobile() { let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) return flag; } }