移动端字体适配

一、移动端图片适配

1、使用 <img> 的 srcset

<img src="logo.png"
     srcset="logo@2x.png 2x,
             logo@3x.png 3x"
     alt="Logo">

优点：原生支持，浏览器自动选择最合适的图片。

2、使用媒体查询切换背景图

.logo {
  background-image: url("logo.png");
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .logo {
    background-image: url("logo@2x.png");
    background-size: contain;
  }
}

适用场景：适用于背景图或图标等需要精细控制的场景。

二、适配不同屏幕大小（响应式布局）

为了使页面在各种设备上都能良好显示，应避免使用固定单位 px，而采用相对单位来布局，如：

三、推荐方案：使用 rem + JS 动态计算字号（主流做法）

这是目前移动端开发中最常用的适配方案，尤其适合以 750px 或 640px 为标准设计稿的项目。

1. 设置视口 viewport

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

2. 动态设置 HTML 根字号（JS 控制）

function setRem() { const baseSize = 16; // 假设设计稿宽度为 750px，1rem = 16px
 const scale = document.documentElement.clientWidth / 750; 
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; 
} 
window.addEventListener('resize', setRem); 
setRem();

📌 说明：

• 通过 JavaScript 动态调整 html 的 font-size，从而让 rem 的值随屏幕变化；
• 设置最大缩放比例（如不超过 2 倍），防止文字过大影响体验。

3. 编写样式时使用 rem 单位

.container { width: 750px; /* 按照设计稿数值 */ 
   font-size: 16px; /* 对应 1rem */ } 
.title { font-size: 1.5rem; /* 实际为 24px */ }

📌 优化建议：

• 使用 PostCSS 插件 postcss-pxtorem 可以自动将 px 转换为 rem，提升开发效率；
• 配合 Vue CLI、Vite 等现代构建工具，可一键完成转换。

四、备选方案：使用 vw/vh 实现响应式布局

适用于不需要复杂交互、结构简单的页面，比如 H5 页面、营销页等。

.title { font-size: 5vw; /* 字体大小随视口宽度变化 */ } 
.fullscreen { width: 100vw; height: 100vh; }

优点：

• 不依赖 JavaScript；
• 实现简单直观。

缺点：

• 在 iOS 上软键盘弹出会影响 vh 计算；
• 字体大小波动较大，可能影响阅读体验。

五、完整的移动端适配流程总结