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

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

（1）获取设备类型

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

（2）样式适配

拆分两套css

通过判断终端类型，加载不同的css文件，控制元素显隐
媒体查询结合rem实现PC端和移动端共用一套代码的适配方案

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

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

?
1
2
3
<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)
  }