移动端适配

物理像素 = CSS 像素 × DPR
 
示例：
- iPhone 15: 393 × 3 = 1179 物理像素宽度
- 1px CSS 边框在 DPR=2 的屏幕上 = 2 物理像素
- 1px CSS 边框在 DPR=3 的屏幕上 = 3 物理像素

// 获取设备像素比
const dpr = window.devicePixelRatio;
console.log(`当前设备 DPR: ${dpr}`);
 
// 获取屏幕物理像素
const physicalWidth = screen.width * dpr;
const physicalHeight = screen.height * dpr;
console.log(`物理分辨率: ${physicalWidth} × ${physicalHeight}`);

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 标准配置（推荐） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<!-- 全面屏适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 
<!-- ⚠️ 不推荐：禁止缩放（影响可访问性） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

// 获取视觉视口信息
console.log('宽度:', window.visualViewport.width);
console.log('高度:', window.visualViewport.height);
console.log('缩放比例:', window.visualViewport.scale);
 
// 监听视觉视口变化（虚拟键盘弹出时触发）
window.visualViewport?.addEventListener('resize', () => {
  console.log('视口变化:', window.visualViewport.width, window.visualViewport.height);
});
 
window.visualViewport?.addEventListener('scroll', () => {
  console.log('视口滚动偏移:', window.visualViewport.offsetTop);
});

1rem = 根元素字体大小
根元素字体大小 = 屏幕宽度 / 设计稿宽度 × 基准值
 
示例（设计稿 375px，基准值 100px）：
- 375px 屏幕：根字体 = 375 / 375 × 100 = 100px
- 750px 屏幕：根字体 = 750 / 375 × 100 = 200px
- 设计稿 100px 元素：CSS 写 1rem

/**
 * rem 适配方案
 * @param {number} designWidth - 设计稿宽度（默认 375）
 * @param {number} baseSize - 基准字体大小（默认 100，方便计算）
 */
function setRem(designWidth = 375, baseSize = 100) {
  const clientWidth = document.documentElement.clientWidth;
  const fontSize = (clientWidth / designWidth) * baseSize;
  
  // 限制最大最小值，防止极端情况下布局异常
  const finalSize = Math.min(Math.max(fontSize, baseSize * 0.6), baseSize * 2);
  document.documentElement.style.fontSize = finalSize + 'px';
}
 
// 初始化
setRem();
 
// 监听窗口变化
window.addEventListener('resize', () => setRem());
window.addEventListener('orientationchange', () => setRem());

/* 手动计算 */
/* 设计稿元素宽度 100px，基准值 100px */
.element {
  width: 1rem; /* 100 / 100 = 1rem */
  height: 0.5rem; /* 50 / 100 = 0.5rem */
  font-size: 0.14rem; /* 14 / 100 = 0.14rem */
}
 
/* 使用 CSS 变量辅助计算 */
:root {
  --design-width: 375;
}
 
.element {
  /* width: 设计稿尺寸 / (设计稿宽度 / 100) */
  width: calc(100 / var(--design-width) * 100vw);
}

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100,       // 基准值（与 JS 中的 baseSize 一致）
      unitPrecision: 5,     // 小数精度
      propList: ['*', '!border*'],  // 转换属性列表，排除 border
      selectorBlackList: ['.no-rem'],  // 忽略的选择器
      replace: true,        // 替换而非添加
      mediaQuery: false,    // 不转换媒体查询中的 px
      minPixelValue: 2      // 小于 2px 不转换
    }
  }
};

/* 输入 */
.element {
  width: 100px;
  height: 50px;
  border: 1px solid #ddd;
  font-size: 14px;
}
 
/* 输出 */
.element {
  width: 1rem;
  height: 0.5rem;
  border: 1px solid #ddd; /* 小于 2px 不转换 */
  font-size: 0.14rem;
}

<!-- 使用 CDN -->
<script src="https://cdn.jsdelivr.net/npm/lib-flexible@0.3.2/flexible.min.js"></script>

// 或 npm 安装
import 'lib-flexible';

设计稿宽度 375px，元素 100px
100 / 375 * 100 = 26.667vw
 
设计稿宽度 375px，元素 14px 字号
14 / 375 * 100 = 3.733vw

/* 手动计算 */
.element {
  width: 26.667vw; /* 100 / 375 * 100 */
  height: 13.333vw; /* 50 / 375 * 100 */
  font-size: 3.733vw; /* 14 / 375 * 100 */
}

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,      // 设计稿宽度
      viewportHeight: 667,     // 设计稿高度
      unitPrecision: 5,        // 精度
      viewportUnit: 'vw',      // 转换单位
      selectorBlackList: ['.ignore'],  // 忽略选择器
      minPixelValue: 1,
      mediaQuery: false,
      exclude: [/node_modules/]
    }
  }
};

/* 输入 */
.element {
  width: 100px;
  height: 50px;
  font-size: 14px;
}
 
/* 输出 */
.element {
  width: 26.667vw;
  height: 13.333vw;
  font-size: 3.733vw;
}

/* html 根字体大小基于视口宽度 */
html {
  font-size: calc(100vw / 3.75);  /* 设计稿 375px 时，1rem = 100px */
}
 
/* 限制最大最小值，防止大屏/小屏极端情况 */
@media screen and (min-width: 750px) {
  html {
    font-size: 200px;  /* 最大限制 */
  }
}
 
@media screen and (max-width: 320px) {
  html {
    font-size: 85.33px;  /* 最小限制 */
  }
}
 
/* 元素使用 rem 单位 */
.element {
  width: 1rem;  /* 设计稿 100px */
  height: 0.5rem;  /* 设计稿 50px */
  font-size: 0.14rem;  /* 设计稿 14px */
}

DPR = 物理像素 / CSS 像素
 
DPR = 2 时：1 CSS 像素 = 2 物理像素（看起来偏粗）
DPR = 3 时：1 CSS 像素 = 3 物理像素（看起来更粗）

/* 单边框 */
.hairline-bottom {
  position: relative;
}
 
.hairline-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  transform: scaleY(0.5);
  transform-origin: bottom;
}
 
/* 四边框 */
.hairline-all {
  position: relative;
}
 
.hairline-all::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #ddd;
  transform: scale(0.5);
  transform-origin: left top;
  pointer-events: none;
  box-sizing: border-box;
}
 
/* 带圆角的四边框 */
.hairline-rounded {
  position: relative;
  border-radius: 8px;
}
 
.hairline-rounded::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  border: 1px solid #ddd;
  border-radius: 16px;  /* 圆角也需要 2 倍 */
  transform: scale(0.5);
  transform-origin: center;
  pointer-events: none;
  box-sizing: border-box;
}

.hairline {
  /* 单边 */
  box-shadow: 0 0.5px 0 #ddd;
  
  /* 四边 */
  box-shadow: 0 0 0 0.5px #ddd;
}

/* iOS 8+ / Android 5+ 支持 */
.hairline {
  border: 0.5px solid #ddd;
}
 
/* 兼容处理：不支持 0.5px 时使用 1px */
.hairline {
  border: 1px solid #ddd;
}
 
@supports (border: 0.5px solid #ddd) {
  .hairline {
    border: 0.5px solid #ddd;
  }
}
 
/* 或使用 DPR 媒体查询 */
@media (-webkit-min-device-pixel-ratio: 2) {
  .hairline {
    border-width: 0.5px;
  }
}

<!-- 动态设置 viewport scale -->
<meta name="viewport" content="width=device-width, initial-scale=0.5">

.hairline-bg {
  background: linear-gradient(180deg, #ddd, #ddd 1px, transparent 1px) no-repeat;
  background-size: 100% 1px;
  background-position: bottom;
}
 
/* 四边 */
.hairline-bg-all {
  background:
    linear-gradient(180deg, #ddd, #ddd 1px, transparent 1px) no-repeat top / 100% 1px,
    linear-gradient(180deg, #ddd, #ddd 1px, transparent 1px) no-repeat bottom / 100% 1px,
    linear-gradient(90deg, #ddd, #ddd 1px, transparent 1px) no-repeat left / 1px 100%,
    linear-gradient(90deg, #ddd, #ddd 1px, transparent 1px) no-repeat right / 1px 100%;
}

/* 1px 边框工具类 */
[class*="hairline"] {
  position: relative;
}
 
[class*="hairline"]::after {
  content: '';
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  transform-origin: center;
}
 
/* 上边框 */
.hairline-top::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleY(0.5);
}
 
/* 下边框 */
.hairline-bottom::after {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleY(0.5);
}
 
/* 全边框 */
.hairline-surround::after {
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid currentColor;
  transform: scale(0.5);
  transform-origin: left top;
}

<!-- cover: 页面完全覆盖屏幕（包含安全区域外） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 
<!-- contain: 页面在安全区域内显示（不覆盖刘海等） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">

/* 安全区域内边距 */
.footer {
  /* iOS 11.0-11.2 使用 constant */
  padding-bottom: constant(safe-area-inset-bottom);
  /* iOS 11.2+ 使用 env */
  padding-bottom: env(safe-area-inset-bottom);
}
 
/* 四个方向的安全区域 */
.element {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
 
/* 与原有 padding 结合 */
.footer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* 底部固定按钮 */
.fixed-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  /* 兼容 iOS 11.0-11.2 */
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  /* iOS 11.2+ */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* 横屏时左右安全区域 */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

<!-- 根据 DPR 选择图片 -->
<img 
  src="image.png"
  srcset="image.png 1x, image@2x.png 2x, image@3x.png 3x"
  alt="高清图片">
 
<!-- 根据宽度选择图片 -->
<img 
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="响应式图片">

/* 背景图片 */
.icon {
  width: 24px;
  height: 24px;
  background-image: url('icon@1x.png');
  background-size: contain;
}
 
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon {
    background-image: url('icon@2x.png');
  }
}
 
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .icon {
    background-image: url('icon@3x.png');
  }
}

.icon {
  background-image: image-set(
    'icon@1x.png' 1x,
    'icon@2x.png' 2x,
    'icon@3x.png' 3x
  );
}

<!-- SVG 图标天然支持高清屏，无需多倍图 -->
<img src="icon.svg" alt="图标" width="24" height="24">
 
<!-- 或使用 icon font -->
<link rel="stylesheet" href="iconfont.css">
<span class="iconfont icon-home"></span>

/* 推荐：vw + rem 混合方案 */
html {
  font-size: calc(100vw / 3.75);
}
 
/* 限制范围 */
@media (min-width: 750px) {
  html { font-size: 200px; }
}
 
@media (max-width: 320px) {
  html { font-size: 85.33px; }
}

// postcss.config.js - 完整配置
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      unitPrecision: 5,
      viewportUnit: 'vw',
      selectorBlackList: ['.van'],  // 忽略第三方组件
      minPixelValue: 1,
      mediaQuery: false
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.van']
    }
  }
};

// 获取设备信息
const info = {
  dpr: window.devicePixelRatio,
  width: window.innerWidth,
  height: window.innerHeight,
  pixelRatio: window.devicePixelRatio,
  isIOS: /iPhone|iPad|iPod/i.test(navigator.userAgent),
  isAndroid: /Android/i.test(navigator.userAgent)
};
console.log('设备信息:', info);

/* 减少重绘 */
.will-change {
  will-change: transform;
  transform: translateZ(0);
}
 
/* 合理使用硬件加速 */
.animate {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* 移动端点击延迟（300ms） */
* {
  touch-action: manipulation;
}
 
/* iOS 输入框内阴影 */
input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}
 
/* 移动端字体 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
 
/* 禁用长按菜单 */
img, a {
  -webkit-touch-callout: none;
}
 
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

html { font-size: calc(100vw / 3.75); }  /* 10vw = 37.5px */
 
/* 设计稿 100px = 100 / 37.5 = 2.667rem */
.element { width: 2.667rem; }

.element {
  width: 50%;     /* 回退方案 */
  width: 50vw;    /* 现代浏览器 */
}

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      selectorBlackList: ['.van', '.ant', '.el'],  // 忽略组件库
    }
  }
};

/* 文章正文不使用 rem/vw，使用固定 px 或 clamp */
.article {
  font-size: 16px;
  line-height: 1.6;
}
 
/* 或使用 clamp 限制范围 */
.article {
  font-size: clamp(14px, 4vw, 18px);
  line-height: 1.6;
}
 
/* 标题可以使用视口单位 */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

const dpr = window.devicePixelRatio || 1;
console.log(`DPR: ${dpr}`);
 
// 响应式加载
if (dpr >= 3) {
  // 加载 3x 图片
} else if (dpr >= 2) {
  // 加载 2x 图片
} else {
  // 加载 1x 图片
}

/* 圆角元素的 1px 边框 */
.rounded-hairline {
  position: relative;
  border-radius: 8px;
}
 
.rounded-hairline::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  border: 1px solid #ddd;
  border-radius: 16px;  /* 圆角值 × 2 */
  transform: scale(0.5);
  transform-origin: center;
  pointer-events: none;
  box-sizing: border-box;
}

<!-- 使用 picture 元素提供不同 DPR 的图片 -->
<picture>
  <source 
    media="(min-resolution: 288dpi)" 
    srcset="image@3x.jpg">
  <source 
    media="(min-resolution: 192dpi)" 
    srcset="image@2x.jpg">
  <img src="image@1x.jpg" alt="适配图片">
</picture>