基于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横跨到移动端的响应式。

两套资源方案

尚未尝试过，先参考网友的解决方案

来自网友