企业级移动端适配方案前言美好的周末早晨，睡梦中的我被手机铃声吵醒，只见工作群中弹出了一条消息。 “公司官网是谁做的？用

前言

美好的周末早晨，睡梦中的我被手机铃声吵醒，只见工作群中弹出了一条消息。

“公司官网是谁做的？用手机打开字怎么这么小？谁能看得见？”

呵，咱这暴脾气加起床气，能惯着谁，随手回复：

“看不见就去配个老花镜试试?”

“你周一不用来了。”

瞬间惊醒，冷汗直流，才发现群里质问的人是大BOSS，立马服软：

“我立马改，您周一再看，保证您不配老花镜也能看的清清楚楚。”

又是牛马的一天...

viewport视口设置

首先，要明确PC网页在移动端访问时页面被缩小的原因。

移动端浏览器会根据viewport（视口）设置，来绘制页面内容。当我们不设置时，浏览器会使用默认的布局视口的宽度（通常为980px或1024px），而移动端的理想视口宽度（设备宽度）通常为400px左右，也就是说：

浏览器会将980px宽的布局视口等比例缩小，强制适配到实际400px的屏幕中。

这样就会导致移动端浏览PC网页时，页面内容被缩小，文字模糊。要解决这个问题，我们需要对viewport进行设置。

在html中通过meta标签来设置viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

参数	含义
`width=device-width`	布局视口宽度=设备屏幕宽度
`initial-scale=1.0`	初始缩放比例为 1（页面不缩放）
`maximum-scale=1.0`	最大缩放比例为 1（禁止用户放大）
`minimum-scale=1.0`	最小缩放比例为 1（禁止用户缩小）
`user-scalable=no`	禁止用户手动缩放，值为 `yes` 允许手动缩放

样式/布局调整

解决了缩放问题后，还需要对整体的样式和布局进行调整。

rem移动端适配

rem是css中一种相对长度单位，基于根元素Html的字体大小计算。

1rem = html元素的font-size值。

所有使用rem的元素，都依赖同一个值（根元素html的font-size），这样只要动态修改根元素的font-size，就可以同步调整所有元素的尺寸，实现一处调整，全局适配。

首先，配置 `postcss-pxtorem` 插件自动将 `px` 转换为 `rem`。

安装postcss-pxtorem 插件

npm install postcss postcss-pxtorem --save-dev

在项目根目录下创建 postcss.config.js，添加如下配置：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, // 关键：与设置的根元素 font-size 基准值一致（如 1rem = 100px）
      propList: ['*'], // 需要转换的 CSS 属性（* 表示所有属性，包括 width、height、font-size 等）
      selectorBlackList: ['no-rem-'], // 类名前缀为 no-rem- 的元素不转换（如 .no-rem-btn 保留 px）
      replace: true, // 直接替换 px 为 rem，不保留原 px
      mediaQuery: false, // 不转换媒体查询中的 px（如需转换可设为 true）
      minPixelValue: 2, // 小于 2px 的值不转换（避免 1px 边框被转换）
    }
  }
};

在构建工具中集成

vite项目

内置 PostCSS，只需在项目根目录创建 postcss.config.js 即可，无需额外配置。
webpack项目

在 webpack.config.js 中添加 PostCSS 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader' // 确保添加此 loader
        ]
      }
    ]
  }
};

注意：
`postcss-pxtorem` 插件无法处理行内样式，需要手动修改。

然后，监听屏幕尺寸大小来动态设置根元素的字体大小：

// 根元素 font-size = (屏幕实际宽度 / 设计稿宽度) × 转换基准值（如 100px）
function setRootFontSize() {
    const designWidth = 1920; // 设计稿宽度（与设计稿一致）
    const rootValue = 100; // 与 postcss 配置中的 rootValue 保持一致
    const screenWidth = window.innerWidth;

    // 运行时根元素 font-size = 屏幕宽度 / 设计稿宽度 × rootValue
    // （确保 rem 实际尺寸随屏幕按比例缩放）
    const fontSize = (screenWidth / designWidth) * rootValue;
    
    const html = document.querySelector('html');
    html.style.fontSize = `${fontSize}px`;
}
setRootFontSize();
// resize 监听屏幕大小的变化，如屏幕旋转、窗口缩放
window.addEventListener('resize', setRootFontSize);

这样，在编写css时可以直接使用px，插件在编译时会自动将px转为rem。

但是，rem只是实现了等比例的缩放，不能自动改变页面的布局结构，还需要配合 @media 来配合实现不同屏幕下的布局切换。

@media 媒体查询

使用 CSS 的 @media 媒体查询，来定制小屏下的样式。如：将多列显示转为单列显示：

/* 仅在移动端生效（屏幕宽度 < 768px） */
@media (max-width: 767px) {
  /* 列表项、卡片等多列元素，转为单列 */
  .list-item, .card {
    width: 100% !important; /* 覆盖原有的宽度 */
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
@media (max-width: 767px) {
  .container {
    width: 100%; /* 占满屏幕宽度，避免横向滚动 */
  }
}
}

总结

移动端适配方案分为以下几个步骤：

设置viewport，让布局视口的宽度等于设备屏幕宽度；
配置postcss-pxtorem插件将px自动转换为rem；
计算不同尺寸下的根元素font-size大小；
利用@media媒体查询修改页面布局。

大功告成，又可以愉快的去上班了！

企业级移动端适配方案

前言