基於Vue的跨移動端和PC端適應

需求

開發一個平臺，要求在PC端和移動端上都有較好的體驗。

---

思路

作到移動端和PC端同時適配，通常有兩個大思路：

1. 一套資源，根據判斷是不是移動設備而選擇加載不一樣的css。
2. 兩套資源，pc和mobile各一套，分開維護，在入口處進入不一樣的路由。

兩種方式的差異體如今，前者是樣式層面分爲pc和mobile，後者是頁面分爲pc和mobile

兩個作法各自的特色：
1.前者適用於兩端交互和佈局差異不大，交互比較簡單的項目。只有一套資源，代碼量少，維護起來比較簡單。
2.後者則適用於兩端交互方式和佈局差異大，對設計要求高，拓展性要求高的項目。兩套資源，代碼量大，前期配置比較複雜，可是兩端不相互影響，開發起來不用考慮太多。

---

解決方案

一套資源方案

因爲目前項目要求快速開發快速落地，且兩端設計稿佈局差距不大。因此採用了第一種方式。實現以下：
main.js中配置，在頁面加載前，判斷終端設備類型。

navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
複製代碼

經過判斷終端類型，加載不一樣的css文件，pc採用px爲單位，mobile採用rem和vw結合，並在mobile的css文件中，設置項目font-size，例如設計稿爲375px的狀況下，html {font-size: calc(100vw/37.5)}這時候，當移動設備可視窗口大小爲375px時，html的font-size爲10px，則1rem=10px。

styles結構以下：將css拆分爲pc和mobile兩套,每一個開發人員都有本身的兩套css文件。

// mobile.scss
@import './mobile/hm-mobile.scss';
@import './mobile/tf-mobile.scss';

.no-mobile {
  display: none;
}
html {
  font-size: calc(100vw/37.5);
}
複製代碼

// pc.scss
@import './pc/hm-pc.scss';
@import './pc/tf-pc.scss';
.no-pc {
  display: none;
}
複製代碼

// main.js配置
import { _isMobile } from '@/utils/utils';
...
...
...
if (_isMobile()) {
  require('./styles/mobile.scss');
  console.log('mobile');
} else {
  console.log('pc');
  require('./styles/pc.scss');
}

複製代碼

需****格外注意的是，樣式都寫在了全局的樣式文件裏，在多人協同開發時，須要強調命名規範，以防命名污染，能夠參考**BEM命名規範    **

爲何不使用媒體查詢，靠一套CSS同時搞定PC和移動端？ 做者考慮到同一套CSS會使得耦合性過高，後期兩端維護起來很麻煩，而且若兩端項目都要拆分起來成本增長。所以，能夠在兩套CSS的前提下，針對其中一端，進行響應式實現，好比針對PC端可作大中小屏的響應式，而不是直接從pc橫跨到移動端的響應式。

兩套資源方案

尚未嘗試過，先參考網友的解決方案

來自網友