简单回顾下pc端与mobile端的适配问题

一、响应式布局方案（单页面适配）

‌核心原理‌：通过CSS媒体查询动态调整布局，配合vw/rem单位实现跨设备适配‌

‌完整示例‌：

css 复制代码

/* 移动端基准尺寸 */
:root {
  --base-font: calc(100vw / 37.5); /* 以375px设计稿为基准 */
}

@media (max-width: 768px) {
  .container {
    padding: 0.2rem;
    font-size: calc(var(--base-font) * 14);
  }
}

@media (min-width: 769px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    font-size: calc(var(--base-font) * 16);
  }
}

‌关键步骤‌：

设置视口标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用clamp()函数实现弹性布局：width: clamp(300px, 80%, 1200px)
图片使用srcset属性适配不同分辨率‌1

二、两套独立页面方案

‌核心原理‌：通过UA检测动态加载PC/Mobile页面，适合复杂业务场景‌

‌Vue项目实现‌：

javascript 复制代码

// 路由配置
const routes = [
  { path: '/', component: () => import('./PC/Home.vue') },
  { path: '/mobile', component: () => import('./Mobile/Home.vue') }
]

// 设备检测中间件
router.beforeEach((to, from, next) => {
  const isMobile = /mobile|android|iphone/i.test(navigator.userAgent)
  if(isMobile && !to.path.includes('/mobile')) {
    next('/mobile')
  } else {
    next()
  }
})

‌关键配置‌：

独立维护/pc和/mobile目录结构
后端配合Nginx进行UA识别转发‌
共用API接口，差异化样式处理

三、动态REM适配方案

‌核心技术‌：通过JS动态计算根字体大小，结合PostCSS自动转换单位‌

‌完整配置‌：

安装依赖：

npm install amfe-flexible postcss-pxtorem -D
修改flexible.js源码：

arduino 复制代码

// 注释掉540px限制
if (width / dpr > 540) {
  width = width * dpr // 原代码为 width = 540 * dpr
}

创建postcss.config.js：

java 复制代码

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 750设计稿时设为75
      propList: ['*', '!border'],
      selectorBlackList: ['el-'] // 排除element组件
    }
  }
}

四、Viewport动态缩放方案

‌核心原理‌：通过Viewport单位实现等比缩放，适合高保真设计需求‌

‌Vite项目配置‌：

php 复制代码

// vite.config.js
import px2viewport from 'postcss-px-to-viewport'

export default {
  css: {
    postcss: {
      plugins: [
        px2viewport({
          viewportWidth: 1920, // PC基准尺寸
          viewportHeight: 1080,
          unitPrecision: 3,
          viewportUnit: 'vw',
          selectorBlackList: ['.ignore'],
          minPixelValue: 1
        })
      ]
    }
  }
}

‌使用示例‌：

css 复制代码

/* 设计稿1920px中标注200px的元素 */
.box {
  width: calc(200 / 19.2 * 1vw); /* 200/1920*100 = 10.416vw */
  height: calc(100vh - 10vw);
}

方案对比选择建议：

方案类型	适用场景	优点	缺点
响应式布局	内容型网站	维护成本低	复杂交互适配困难‌
独立页面	大型管理系统	体验最佳	双倍开发量‌
REM适配	移动端为主	兼容性好	PC需源码改造‌
Viewport	全终端项目	缩放精准	需PostCSS配合‌