vue实现pc和移动端兼容响应式布局

1.一套代码实现pc端和移动端兼容。

（1）获取设备类型

 // 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)

（2）样式适配

• 拆分两套css

  ​通过判断终端类型，加载不同的css文件，控制元素显隐

• 媒体查询结合rem实现PC端和移动端共用一套代码的适配方案

  媒体查询 @media为不同的尺寸设备应用不同的样式

  rem 是一个根据 html 根元素 font-size 计算的相对单位（让大小尺寸不一的手机都能按比例的缩放）。rem适合写固定尺寸，其余的根据需要换成flex或者百分比。

  <style scope>/* PC端的CSS样式代码 */
  
  @media screen and (max-width: 750px) {/* 移动端的CSS样式代码 */}</style>
  

  　　

2.一个项目两套代码，一套路由规则开发。

（1）获取当前设备类型，共享给全局使用

• pinia 中定义名为 device 的 state，用于全局共享当前设备（pc || mobile）

• app.vue监听当前设备类型

mounted() {
  window.addEventListener('resize', this.resizeChange, false)
}
resizeChange () {
  // 判断是否是 pc 或者 移动端
  // 默认设置当屏幕宽度 > 1000 时，为PC端
  if (document.documentElement.clientWidth > 1000) {
    useDevice.setDevice('pc')
  } else {
    // 默认设置当屏幕宽度 <= 1000 时，为移动端
    useDevice.setDevice('mobile')
  }
},
// 也可以用机型之类的条件来判断
resizeChange () {
  const width = document.documentElement.clientWidth
  // 先判断 UA 是否为移动端设备（手机&平板）
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
      this.mode = 'mobile'
  } else {
      // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
      if (width < 992) {
         useDevice.setDevice('mobile')
      } else {
         useDevice.setDevice('pc')
      }
  }
}
destroyed () {
    window.removeEventListener('resize', this.resizeChange, false)
  }

• 页面结构

            device/index.vue中使用动态组件，控制使用device/pc.vue 或device/mobile.vue。

（2） 使用 postcss-px-to-viewport 将项目中的 px 单位转换为 vw

　　    配置include: [/device\\m.vue/]使我们移动端代码中的 px 单位自动转换为 vw，而 pc 端的代码不受影响。

　　有的使用postcss-pxtorem、amfe-flexible做Rem适配

​ 　　  amfe-flexible：根据屏幕宽度，自动设置html的font-size ​ postcss-pxtorem：自动将px单位转换成rem

​ (3) mixins 来优化

         pc端 和 移动端 的差别更多体现在页面元素的样式上（大小、位置、显隐），而实际的业务逻辑变化并不大。比如可以在首页 index 页面目录下添加一个 mixin.js 文件，将 device/pc.vue 和 device/mobile.vue 的公共业务逻辑抽离到该文件中，从而实现复用。

3.一个项目两套代码，两套路由规则开发

       同时兼任pc和移动适配

       通过配置两套不同路由和判断是否是移动端实现

       核心代码：*router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；*（区分路由）

        路由适配（路由守卫），组件适配

       比较麻烦，不推荐