请告诉我标题对应的内容、想要的风格，我马上给你生成。

移动端适配实战：rem、vw 与 1px 边框的工程化方案

一、问题的起点

移动端页面的核心矛盾，是设计稿的固定像素 与屏幕的碎片化宽度之间的错配。设计稿给的是 375pt 视觉稿，用户手里的设备却可能是 320、414、430，甚至是折叠屏展开后的 600+。如果直接用 px 写死，要么小屏溢出，要么大屏缩水。

解决思路只有两条：等比缩放 与弹性布局。前者靠 rem/vw 换算，后者靠 flex/grid + 百分比。实际项目里两者混用是最优解。

二、方案一：rem 动态根字号

核心是把根元素的 font-size 与视口宽度绑定，之后所有尺寸都用 rem。

js 复制代码

// flexible.js ------ 以 375 设计稿为基准，1rem = 37.5px
(function (doc, win) {
  const baseW = 375;
  const docEl = doc.documentElement;
  const resize = () => {
    let width = docEl.clientWidth;
    // 平板/折叠屏做上限保护，避免字大得离谱
    if (width > 540) width = 540;
    docEl.style.fontSize = (width / baseW) * 37.5 + 'px';
  };
  win.addEventListener('resize', resize, false);
  win.addEventListener('pageshow', e => e.persisted && resize(), false);
  resize();
})(document, window);

配套 PostCSS，让开发者仍按设计稿的 px 写代码：

js 复制代码

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      // 1px 边框、字体不参与换算
      selectorBlackList: ['no-rem'],
      minPixelValue: 2
    }
  }
};

注意两点：minPixelValue: 2 避免 1px 被算成 0.0267rem 导致渲染抖动；字号单独用 px 或 clamp() 锁定最小值，防止小屏字体糊成一团。

三、方案二：vw 纯 CSS 方案

vw 的好处是不需要 JS，首屏不会因为脚本未执行而跳版。

css 复制代码

/* 设计稿 750，则 1px = 100vw / 750 = 13.333vw */
:root {
  --vw: calc(100vw / 750);
}

.card {
  width: calc(690 * var(--vw));
  padding: calc(24 * var(--vw));
  border-radius: calc(16 * var(--vw));
  font-size: clamp(12px, calc(28 * var(--vw)), 18px);
}

clamp() 是这里的点睛之笔：它同时给出下限、弹性值与上限，一行代码解决「小屏不能太小、大屏不能太大」。相比 rem 需要 JS 兜底，vw + clamp 的静态特性在弱网下表现更稳。

四、1px 边框：物理像素的最后一道坎

border: 1px 在 2x/3x 屏幕上会被渲染成 2~3 个物理像素，视觉上偏粗。工业界的标准做法是伪元素 + 缩放。

css 复制代码

.hairline {
  position: relative;
}

.hairline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  transform: scale(0.5);
  transform-origin: 0 0;
  box-sizing: border-box;
  pointer-events: none;
}

/* 3x 屏用 0.333，也可以用媒体查询精确匹配 */
@media (-webkit-min-device-pixel-ratio: 3) {
  .hairline::after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
  }
}

这套写法的代价是伪元素会被 overflow: hidden 裁掉，且圆角需要按比例放大。若项目已引入 postcss-write-svg，用 SVG 描边是更干净的选择；对性能极致敏感的场景，也可以直接在构建期生成 base64 边框图。

五、安全区与滚动穿透

刘海屏机型必须处理 env(safe-area-inset-*)，否则底部按钮会被 Home Indicator 遮挡。

css 复制代码

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
  padding-bottom: env(safe-area-inset-bottom);
}

/* 弹层打开时锁滚动，注意保留滚动位置 */
body.modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

position: fixed 锁滚动会让页面跳到顶部，工程上要记录 scrollTop，关闭时再还原，否则用户会有明显的「页面回弹」感知。

六、落地清单

根字号换算必须有上限，平板与折叠屏不做保护就是事故现场。
字体不参与 rem 换算，用 clamp() 兜住可读性底线。
1px 边框统一走 .hairline 类，禁止业务代码里散写。
安全区变量在所有 fixed 定位组件上默认补齐，不要等测试提 bug。
图片用 aspect-ratio 而非 padding-top 百分比 hack，减少布局偏移（CLS）。

适配从来不是一套公式通吃，而是在缩放、弹性、保护三者之间找到平衡点。把上面这几条固化成脚手架与 lint 规则，新页面就不会再重复踩坑。

海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】