web移动端精选面试题以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以

以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。40

前端手机端开发的高频面试题

以下是针对前端手机端开发的高频面试题总结，涵盖移动端适配、性能优化、事件处理、兼容性问题等核心知识点：

一、移动端适配方案

1. 视口（Viewport）配置

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

width=device-width：视口宽度等于设备宽度。
initial-scale：初始缩放比例。
user-scalable=no：禁止用户手动缩放（根据需求选择）。

2. 布局方案

Flex 布局：适合动态排列的组件。

.container { display: flex; justify-content: space-between; }

Rem 适配：基于根字体大小的响应式布局。

// 动态设置 rem 基准值（假设设计稿宽度 750px）
document.documentElement.style.fontSize = (document.documentElement.clientWidth / 7.5) + 'px';

vw/vh 单位：直接基于视口宽度/高度的百分比。
```
.box { width: 50vw; } /* 视口宽度的 50% */
```

3. 1px 边框问题

原因：Retina 屏幕物理像素与 CSS 像素比（如 2x、3x）。

解决方案：

.border-1px {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    background: #ccc;
  }
}

二、移动端事件处理

1. 点击延迟（300ms 问题）

原因：早期浏览器等待双击缩放判断。
解决方案：
- 引入 FastClick 库。
- 使用 CSS 禁用缩放：touch-action: manipulation;。

2. 触摸事件（Touch Events）

核心事件：touchstart、touchmove、touchend。

示例：实现滑动轮播：

let startX = 0;
element.addEventListener('touchstart', e => {
  startX = e.touches[0].clientX;
});
element.addEventListener('touchend', e => {
  const deltaX = e.changedTouches[0].clientX - startX;
  if (deltaX > 50) swipeLeft();
});

3. 点透问题

场景：上层元素点击后消失，触发底层元素点击事件。
解决：上层元素触摸事件中使用 e.preventDefault()。

三、性能优化

1. 加载优化

图片懒加载：

<img data-src="image.jpg" class="lazyload">

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

资源压缩：使用 WebP 格式图片、开启 Gzip/Brotli 压缩。

2. 渲染优化

减少重排（Reflow）：
- 使用 transform 替代 top/left 动画。
- 批量修改 DOM（DocumentFragment）。
硬件加速：
```
.animate { transform: translateZ(0); }
```

3. 内存管理

及时解绑事件监听器。
避免内存泄漏（如定时器未清除）。

四、兼容性问题

1. iOS 滑动卡顿

-webkit-overflow-scrolling: touch; /* 启用弹性滚动 */

.scroll-container {
  -webkit-overflow-scrolling: touch; /* 启用弹性滚动 */
  overflow-scrolling: touch;
}

2. `Android 输入框被键盘遮挡`

window.addEventListener('resize', () => {
  if (document.activeElement.tagName === 'INPUT') {
    document.activeElement.scrollIntoView({ behavior: 'smooth' });
  }
});

3. iOS 日期输入框兼容

使用第三方日期选择库（如 Flatpickr）替代原生 <input type="date">。

五、Hybrid 开发相关

1. JSBridge 通信原理

Native → Web：通过 WebView 的 evaluateJavascript 执行 JS。
Web → Native：
- URL Scheme：location.href = 'myapp://action?params'。
- 注入 API：Native 向 WebView 注入全局对象供 JS 调用。

2. WebView 优化

预加载 WebView 池。
客户端离线资源包（减少网络请求）。

六、高频面试题示例

如何实现移动端 REM 适配？
- 动态设置 html 的 font-size，结合 rem 单位。
移动端点击事件有哪些问题？如何解决？
- 点击延迟（FastClick）、点透问题（阻止默认事件）。
如何优化移动端页面的滚动性能？
- 使用 transform 动画、避免频繁修改 DOM、启用硬件加速。
Hybrid 开发中如何实现双向通信？
- 通过 JSBridge 的 URL Scheme 或注入 API。

总结

移动端开发的核心挑战在于 多设备适配、性能优化 和 交互体验。面试中需重点展示对布局方案、事件处理、性能瓶颈的解决能力，并结合实际项目经验说明优化策略。

以下是前端手机端开发的高级面试题，涵盖性能优化深度实践、框架底层原理、复杂场景解决方案等方向，适合中高级岗位考察：

一、性能优化深度实践

1. 首屏秒开率优化（从 5s 到 1s 的进阶方案）

问题：如何突破传统优化手段（如懒加载、CDN），实现极致首屏速度？
进阶方案：
- SSR + 流式渲染：Next.js/Nuxt.js 服务端渲染结合 Chunk 流式传输。
- 离线包预加载：与客户端协作，将核心资源（HTML/CSS/JS）打包到 App 本地。
- WebView 预热：在用户进入页面前，提前初始化 WebView 容器。
- 关键路径 CSS 内联：将首屏所需 CSS 直接嵌入 HTML，避免请求阻塞。

示例：

// 配合 Service Worker 预缓存关键资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll(['/core.css', '/main.js']))
  );
});

2. 内存泄漏定位与修复

场景：单页应用（SPA）中路由切换后内存持续增长。
排查工具：
- Chrome DevTools Memory 面板（Heap Snapshots 对比）。
- Performance Monitor 监控 JS Heap 变化。
常见原因：
- 未解绑的全局事件监听。
- 闭包意外引用 DOM 节点。
- 第三方库（如图表库）未正确销毁实例。

解决方案：

// Vue.js 组件内
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
  this.chartInstance.dispose(); // 销毁 ECharts 实例
}

二、框架与工程化深度

1. React Native 性能瓶颈与优化

问题：列表滚动卡顿，如何提升至 60 FPS？

优化策略：

FlatList 优化：

<FlatList
  data={data}
  renderItem={({item}) => <ListItem item={item} />}
  keyExtractor={item => item.id}
  initialNumToRender={10} // 首屏渲染项数
  windowSize={21} // 渲染窗口倍数
  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )} // 避免动态高度计算
/>

JS 与 Native 线程通信优化：减少跨桥接（Bridge）的频繁调用，批量处理数据。
Hermes 引擎：启用 Hermes 替代 JavaScriptCore，提升启动速度和内存占用。

2. Webpack 深度定制（移动端场景）

需求：为 Hybrid 应用实现差异化打包（Android/iOS 不同资源）。

解决方案：

环境变量注入：

// webpack.config.js
const platform = process.env.PLATFORM;
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __PLATFORM__: JSON.stringify(platform)
    })
  ]
};

资源条件编译：

// 代码中
if (__PLATFORM__ === 'ios') {
  require('ios-specifc-style.css');
}

三、复杂交互与架构设计

1. 高流畅度手势动画实现

场景：实现类原生体验的拖拽排序列表。

方案：

硬件加速：使用 transform 而非 top/left 控制位置。

触摸事件优化：

let startY = 0;
listItem.addEventListener('touchmove', e => {
  e.preventDefault(); // 阻止默认滚动
  const deltaY = e.touches[0].clientY - startY;
  requestAnimationFrame(() => {
    item.style.transform = `translateY(${deltaY}px)`;
  });
}, { passive: false }); // 必须禁用 passive

惯性滚动模拟：通过触摸速度计算动画曲线。

2. 跨 WebView 通信架构设计

需求：多个独立 WebView 模块（购物车、商品列表）实时状态同步。

方案：

全局事件总线：

// 主 WebView
const eventBus = new EventEmitter();
// 子 WebView 通过 postMessage 与主线程通信
window.parent.postMessage({ type: 'cartUpdate', data: {} }, '*');

SharedWorker 数据共享：多标签页共享同一 Worker 实例。
Redux 状态同步：基于 WebSocket 或 localStorage 的跨窗口状态同步。

四、前沿技术实践

1. PWA 离线化深度实践

挑战：如何在弱网环境下实现核心功能可用？

策略：

动态缓存策略：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetchAndCache(event.request))
  );
});
function fetchAndCache(request) {
  return fetch(request).then(response => {
    if (response.ok) caches.open('v1').then(cache => cache.put(request, response));
    return response.clone();
  });
}

后台同步：

self.addEventListener('sync', event => {
  if (event.tag === 'sync-orders') {
    event.waitUntil(sendOfflineOrders());
  }
});

2. WebAssembly 在移动端的应用

场景：图像处理（如滤镜）性能优化。

实现步骤：

使用 Rust/C++ 编写核心算法，编译为 .wasm。
Web Worker 中加载并运行 WASM，避免阻塞主线程。

与 Canvas 结合实现实时处理：

const wasmModule = await WebAssembly.instantiateStreaming(fetch('image.wasm'));
const processImage = wasmModule.exports.process_image;
// 将 ImageData 数据传入 WASM 处理

五、开放设计题

1. 设计一个高可用的移动端错误监控系统

数据采集：
- 全局错误监听（window.onerror、unhandledrejection）。
- 自定义错误埋点（API 失败、组件异常）。
数据传输：
- 指数退避重传策略。
- 本地暂存（IndexedDB）待网络恢复后上报。
可视化：
- 错误聚合统计（同一错误码合并）。
- SourceMap 映射还原生产环境错误位置。

2. 从零设计一个跨端移动框架

核心架构：
- 渲染引擎：基于 React/Vue 的声明式 UI。
- 原生桥接：通过 JSBinding 暴露设备 API（摄像头、GPS）。
- 插件系统：支持第三方扩展（地图、支付）。
性能权衡：
- 轻量级虚拟 DOM 减少计算开销。
- 部分组件原生化（如滚动列表）。

六、底层原理探究

1. 浏览器渲染合成层（Composite Layer）原理

触发条件：transform、opacity、will-change 等属性。
优化策略：
- 避免层爆炸（超过 30 层会导致合成开销陡增）。
- Chrome DevTools Layers 面板分析层分布。

2. V8 隐藏类（Hidden Class）与内存优化

机制：相同结构的对象共享隐藏类，提升属性访问速度。
编码建议：
- 避免动态增删对象属性。
- 初始化时完整定义对象结构。

总结

高级面试题考察的核心是 复杂问题拆解能力、技术深度 和 系统设计思维。回答时应：

结构化分析：分步骤阐述解决方案。
权衡取舍：明确不同方案的优缺点及适用场景。
结合实践：引用真实项目中的优化案例和数据提升说服力。

移动布局方案

Rem, Em ⭐️

一、rem单位如何转换为像素值

1.当使用rem单位的时候，页面转换为像素大小取决于叶根元素的字体大小，即HTML元素的字体大小。根元素字体大小乘rem的值。例如，根元素的字体大小为16px，那么10rem就等同于10*16=160px。

二、em是如何转换成px的

当使用em单位的时候，像素值是将em值乘以父级使用em单位的元素的字体大小。例如一个div的字体为18px，设置它的宽高为10em，那么此时宽高就是18px*10em=180px。

.test{
    width: 10em;
    height: 10em;
    background-color: #ff7d42;
    font-size: 18px;
}

一定要记住的是，em是根据使用它的元素的font-size的大小来变化的，而不是根据父元素字体大小。有些元素大小是父元素的多少倍那是因为继承了父元素中font-size的设定，所以才起到的作用。

三、em单位的继承效果

使用em单位存在继承的时候，每个元素将自动继承其父元素的字体大小，继承的效果只能被明确的字体单位覆盖，比如px和vw。只要父级元素上面一直有font-size为em单位，则会一直继承，但假如自己设置了font-size的单位为px的时候，则会直接使用自己的px单位的值。
根html的元素将会继承浏览器中设置的字体大小，除非显式的设置固定值去覆盖。所以html元素的字体大小虽然是直接确定rem的值，但这个字体大小首先是来源于浏览器的设置。（所以一定要设置html的值的大小，因为有可能用户的浏览器字体大小是不一致的。）、
当em单位设置在html元素上时，它将转换为em值乘以浏览器字体大小的设置

例如：

html{
    font-size: 1.5em;
}

可以看到，因为浏览器默认字体大小为16px，所以当设置HTML的fontsize的值为1.5em的售后，其对应的px的值为16 * 1.5=24px

所以此时，再设置其他元素的rem的值的时候，其对应的像素值为n * 24px

例如，test的rem的值为10，

.test{
    width: 10rem;
    height: 10rem;
    background-color: #ff7d42;
}

可以看到test的font-size继承了html的值24px，而此时宽高为24*10=240px

总结

1.rem单位翻译为像素值的时候是由html元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式的在html为font-size重写一个单位。

2.em单位转换为像素值的时候，取决于使用它们的元素的font-size的大小，但是有因为有继承关系，所以比较复杂。

优缺点

em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能。em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算

flex布局及优缺点

css3引入的，flex布局；优点在于其容易上手，根据flex规则很容易达到某个布局效果，然而缺点是：浏览器兼容性比较差，只能兼容到ie9及以上；

在前端开发中，REM（Root EM）布局是一种基于根元素字体大小的响应式布局方案，能够实现多设备适配和等比缩放效果。以下是完整的 REM 布局实现原理、步骤和优化策略：

一、REM 布局核心原理

单位定义
- 1rem = 根元素（html）的字体大小（font-size）
- 默认浏览器根字体大小为 16px，即 1rem = 16px
动态计算
- 根据设备宽度动态设置 html 的 font-size，使页面元素按比例缩放。

二、REM 布局实现步骤

1. 设置 Viewport

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

2. 动态计算根字体大小

假设设计稿宽度为 750px，将设备宽度分为 10 等份（便于计算）：

// 设计稿宽度为 750px，1rem = 75px
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

// 监听窗口变化重新计算
window.addEventListener('resize', () => {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
});

四、自动化工具

1. PostCSS 插件（自动 PX 转 REM） `postcss-pxtorem`⭐️

安装插件：

npm install postcss-pxtorem --save-dev

配置 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度/10
      propList: ['*'], // 转换所有属性
      selectorBlackList: [/^body$/], // 忽略特定选择器
    }
  }
}

2. Webpack 集成

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-pxtorem')({ rootValue: 75 })]
              }
            }
          }
        ]
      }
    ]
  }
}

总结

REM 布局的核心是通过 动态根字体大小 实现等比缩放，适用于移动端多设备适配。结合 PostCSS 自动化工具可大幅提升开发效率，但需注意以下问题：

高清屏适配：Retina 屏的 1px 边框需特殊处理。
字体大小：关键文本可结合媒体查询或固定单位。
图片优化：使用 max-width 防止拉伸。

百分比布局

在前端开发中，百分比布局（Percentage-based Layout）是一种基于父容器尺寸的相对单位布局方式，能够实现响应式自适应效果。以下是百分比布局的核心知识点、应用场景及实战技巧：

一、百分比布局的核心规则

1. 基准参照规则

宽度（width）：基于父容器的宽度。
高度（height）：基于父容器的高度（若父元素高度未显式设置，百分比可能失效）。
内外边距（padding/margin）：基于父容器的宽度（无论方向）。
定位偏移（top/left等）：基于最近的定位父元素（position≠static）的对应尺寸。

2. 计算公式

子元素尺寸 = 父元素对应尺寸 × 百分比值

二、常见应用场景

2. 自适应图片容器

.img-wrapper {
  width: 50%; /* 父容器宽度的一半 */
  padding-top: 25%; /* 4:3宽高比（高度=50%父宽 × 3/4） */
  position: relative;
}
.img-wrapper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. 响应式间距控制

.card {
  margin: 2% 5%; /* 左右边距为父宽的5%，上下边距为父宽的2% */
}

三、百分比布局的局限性

1. 父元素尺寸未明确

问题：若父元素未设置 width/height，子元素的百分比可能无效。

解决：

.parent { width: 100%; } /* 显式设置父元素宽度 */
.child { width: 50%; }

2. 高度百分比失效

原因：父元素高度未显式定义。

解决：

html, body { height: 100%; } /* 确保根元素有高度 */
.parent { height: 100vh; } /* 或使用视口单位 */
.child { height: 50%; }

3. 边框与盒模型影响

问题：width: 50% 包含边框时可能导致溢出。

解决：使用 box-sizing: border-box：

.box {
  width: 50%;
  padding: 2%;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 包含内边距和边框 */
}

五、实战技巧

1. 动态计算（calc()）

.sidebar {
  width: calc(25% - 20px); /* 25%父宽减去固定间距 */
}

2. 避免百分比嵌套陷阱

/* ❌ 错误：多层嵌套导致实际宽度为 50% × 50% = 25% */
.grandparent { width: 50%; }
.parent { width: 50%; }
.child { width: 100%; }

/* ✅ 正确：明确每层父元素的尺寸 */
.grandparent { width: 100%; }
.parent { width: 50%; }
.child { width: 100%; }

七、最佳实践总结

明确父元素尺寸：确保百分比计算的基准有效。
结合现代布局：优先使用 Flexbox/Grid 处理复杂结构，百分比用于局部细节。
盒模型控制：始终设置 box-sizing: border-box 避免尺寸计算错误。
响应式兜底：使用媒体查询处理极端屏幕尺寸下的布局异常。

通过合理运用百分比布局，可以在保持代码简洁的同时实现高度灵活的响应式设计。

以下是设备像素、CSS 像素、设备独立像素、DPR、PPI 等核心概念的区别和关联总结：

说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别? ⭐️

1. 设备像素（Physical Pixel）

定义：硬件屏幕的 最小物理发光单元（不可分割）。
特点：
- 由显示屏的物理结构决定，如 1080p 屏幕有 1920×1080 个设备像素。
- 同一设备上，设备像素数量固定不变。
示例：iPhone 13 Pro Max 的屏幕物理分辨率是 1284×2778 个设备像素。

2. CSS 像素（CSS Pixel）

定义：Web 开发中使用的逻辑像素单位（px）。
特点：
- 浏览器根据缩放比例和屏幕密度动态映射到设备像素。
- 用户缩放页面时，1 个 CSS 像素可能对应多个设备像素。
示例：
```
div { width: 300px; } /* CSS 像素 */
```

3. 设备独立像素（Device Independent Pixel, DIP/DP）

定义：操作系统定义的虚拟像素单位，用于保证不同屏幕密度的设备显示一致尺寸。
特点：
- 与设备像素的换算关系由 DPR 决定。
- Android 中 1dp ≈ 160PPI 屏幕的 1 物理像素。
示例：iPhone 的屏幕宽度通常以设备独立像素表示（如 375×812）。

4. `设备像素比`（Device Pixel Ratio, `DPR`）

dpr = 物理像素 / css像素
在dpr = 2； 1px的css像素在设备中是2px的物理像素，这会导致在设备上看上去1px的边框是2px\

解决方法：

用transfrom： scale（）缩小dpr倍数

在meta标签中设定scale缩小两倍

特点：
- DPR ≥ 1（如普通屏 DPR=1，Retina 屏 DPR=2 或 3）。
- 影响高密度屏幕的视觉精度（如 1px 边框变粗问题）。
计算公式：
```
DPR = window.devicePixelRatio;
```

5. 像素密度（PPI: Pixels Per Inch）

定义：屏幕每英寸的物理像素数量，衡量屏幕清晰度。
计算公式：

示例：iPhone 13 Pro Max 的 PPI 为 458。

概念关系与对比

维度	设备像素	CSS 像素	设备独立像素	DPR	PPI
本质	物理硬件单元	逻辑单位	操作系统虚拟单位	比例值	物理密度指标
可变性	固定不变	随用户缩放变化	固定（由设备定义）	固定（设备属性）	固定（设备属性）
开发者关注点	无需直接操作	布局和样式编写	原生应用开发	响应式适配关键参数	屏幕质量评估
示例值	iPhone 13: 1170×2532	`width: 300px`	iPhone 13: 390×844	iPhone 13: DPR=3	iPhone 13: 460 PPI

关键关联总结

DPR 的核心作用
- 设备像素=设备独立像素×DPR
- 当 DPR=2 时，1 个设备独立像素对应 2×2 个设备像素。
CSS 像素与设备像素的映射
- 默认情况下（未缩放）：
- 1 CSS 像素=DPR×1 设备像素
- 用户缩放页面时，此比例动态变化。
高 PPI 屏幕的影响
- PPI 越高，屏幕显示越细腻（相同尺寸下物理像素更多）。
- 高 PPI + 高 DPR 的设备需要更高分辨率图片（如 @2x、@3x 图）。

实战应用场景

响应式布局适配

// 根据 DPR 动态设置视口缩放（解决 1px 问题）
const scale = 1 / window.devicePixelRatio;
metaViewport.content = `width=device-width, initial-scale=${scale}`;

高清图片加载

<img src="image.png" srcset="image@2x.png 2x, image@3x.png 3x">

Canvas 绘图清晰度优化

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);

总结

设备像素：物理屏幕的最小单元，固定不变。
CSS 像素：开发者使用的逻辑单位，受缩放和 DPR 影响。
设备独立像素：操作系统定义的虚拟单位，保证跨设备尺寸一致性。
DPR：连接逻辑与物理像素的比例因子，响应式设计的关键。
PPI：衡量屏幕物理清晰度，与 DPR 共同决定视觉效果。

理解这些概念能帮助开发者解决移动端适配、高清屏优化、Canvas 模糊等问题。

移动端适配1px的问题

在移动端开发中，处理 1px 边框变粗 的问题是 Retina 屏幕（高清屏）下的常见挑战。以下是详细的解决方案和实现步骤：

一、问题原因

设备像素比（DPR）：如 DPR=2 时，1px CSS 像素会被 2x2 的物理像素渲染，视觉上变粗为 2px。
默认渲染机制：浏览器按 CSS 逻辑像素渲染，未自动适配物理像素。

二、解决方案汇总

方案	原理	优点	缺点
`伪元素 + Transform`	缩放边框至物理像素级别	灵活、兼容性好	代码较多，需处理不同方向
Viewport 缩放	调整页面缩放比例匹配 DPR	一劳永逸	影响全局布局，需整体适配
`border-image`	使用图片模拟细边框	简单	图片维护成本高，不灵活
`box-shadow`	用阴影模拟边框	代码简洁	效果不真实，不支持圆角
SVG 绘制	矢量图形适配任意 DPR	精准、无锯齿	实现复杂

三、推荐方案：伪元素 + Transform

1. 通用实现（四边边框）

.border-1px {
  position: relative;
}
.border-1px::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #e0e0e0;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none; /* 防止点击穿透 */
  box-sizing: border-box;
}

2. 单边边框（如底部）

.border-bottom-1px {
  position: relative;
}
.border-bottom-1px::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e0e0e0;
  transform: scaleY(0.5);
  transform-origin: 0 bottom;
}

3. `适配不同 DPR（媒体查询`）

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .border-1px::after {
    transform: scale(0.5);
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .border-1px::after {
    transform: scale(0.333);
  }
}

四、Viewport 缩放方案

1. 动态设置 Viewport

根据 DPR 动态调整缩放比例：

<script>
  const dpr = window.devicePixelRatio || 1;
  const scale = 1 / dpr;
  const meta = document.createElement('meta');
  meta.setAttribute('name', 'viewport');
  meta.setAttribute('content', `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`);
  document.head.appendChild(meta);
</script>

2. 调整 REM 基准

设计稿按 DPR=1 编写，通过 REM 适配：

document.documentElement.style.fontSize = document.documentElement.clientWidth * dpr / 10 + 'px';

五、方案对比与选型建议

中小型项目：推荐 伪元素 + Transform，灵活控制且兼容性好。
大型项目：结合 Viewport 缩放 + REM，统一处理但需全局适配。
简单需求：使用 box-shadow 快速实现（如 box-shadow: 0 0.5px 0 #ccc）。

六、常见问题与解决

1. 边框颜色变浅

原因：缩放导致颜色透明度叠加。
解决：调整颜色值或使用 rgba 控制透明度：
```
border: 1px solid rgba(0, 0, 0, 0.3);
```

2. 圆角边框变形

解决：避免对圆角元素缩放，改用 SVG 或 border-image：

.circle-border {
  border: 1px solid transparent;
  border-image: url('data:image/svg+xml,<svg ...></svg>') 2 stretch;
}

3. 安卓手机边框不显示

解决：确保伪元素 content 不为空，添加透明背景：

.border-1px::after {
  content: "";
  background: transparent;
}

七、自动化工具

使用 PostCSS 插件自动转换 CSS 中的 1px 写法：

安装插件：

npm install postcss-write-svg postcss-px-to-viewport --save-dev

配置 postcss.config.js：

module.exports = {
  plugins: {
    'postcss-write-svg': { utf8: false }, // 生成 SVG 边框
    'postcss-px-to-viewport': { viewportWidth: 750 } // PX 转视口单位
  }
}

总结

解决 1px 问题的核心在于 物理像素精准控制。推荐结合 伪元素缩放 与 媒体查询 实现多设备适配，复杂场景可考虑 Viewport 缩放 或 SVG 方案。实际开发中，优先保证主流设备的显示效果，并通过自动化工具提升效率。

media query

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐 。不过性能方面肯定最高；可能存在闪屏的问题

移动端性能优化相关经验

以下是移动端性能优化的系统化经验总结，涵盖关键策略、实战技巧及工具使用：

一、加载性能优化

1. 减少资源体积

代码压缩：使用 Webpack、Vite 等构建工具压缩 JS/CSS（Terser、CSSNano）。
Tree Shaking：移除未使用的代码（ES Module 静态分析）。
图片优化：
- 格式选择：WebP（兼容性允许）、SVG（矢量图）、渐进式 JPEG。
- 响应式图片：srcset 和 sizes 属性按设备加载合适尺寸。
```
<img src="image-1x.jpg"
     srcset="image-2x.jpg 2x, image-3x.jpg 3x"
     alt="Responsive Image">
```

2. 加速资源传输

CDN 分发：静态资源部署至 CDN，利用边缘节点缓存。
HTTP/2 多路复用：减少连接数，提升并行加载效率。
Brotli/Gzip 压缩：服务器启用压缩，减少传输体积。

3. 按需加载与预加载

懒加载（Lazy Load）：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));

预加载关键资源：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">

二、渲染性能优化

1. 减少重排（Reflow）与重绘（Repaint）

批处理 DOM 操作：

// 错误：多次触发重排
element.style.width = '100px';
element.style.height = '200px';

// 正确：一次性修改
element.style.cssText = 'width:100px; height:200px;';

使用 transform 和 opacity：触发 GPU 加速，跳过布局计算。

.animate {
  transform: translateZ(0); /* 触发硬件加速 */
  transition: transform 0.3s ease;
}

2. 优化 CSS 选择器

避免复杂嵌套：

/* 不推荐 */
.nav ul li a { ... }

/* 推荐 */
.nav-link { ... }

减少通配符和属性选择器：提升样式匹配效率。

3. 合理使用 `will-change 提前告知浏览器优化`

.element {
  will-change: transform; /* 提前告知浏览器优化 */
}

三、JavaScript 执行优化

1. 避免阻塞主线程

Web Workers：将复杂计算移至后台线程。

const worker = new Worker('compute.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* 处理结果 */ };

任务拆分：使用 requestIdleCallback 或 setTimeout 分片执行长任务。

2. 事件处理优化

防抖（Debounce）与节流（Throttle）：

function throttle(func, delay) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}
window.addEventListener('scroll', throttle(handleScroll, 100));

Passive Event Listeners：提升滚动性能。

window.addEventListener('touchmove', handleTouch, { passive: true });

四、内存管理

1. 避免内存泄漏

及时解绑事件与定时器：

class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
    window.addEventListener('click', this.handleClick);
  }
  unmount() {
    window.removeEventListener('click', this.handleClick);
  }
}

释放 DOM 引用：移除元素后置空变量。

2. 优化对象池（Object Pooling）

const pool = [];
function createObject() {
  return pool.length ? pool.pop() : new HeavyObject();
}
function releaseObject(obj) {
  pool.push(obj); // 复用对象而非销毁
}

五、网络与缓存策略

1. Service Worker 离线缓存

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('v1').then(cache => cache.addAll(['/app.css', '/main.js']))
  );
});
self.addEventListener('fetch', (e) => {
  e.respondWith(caches.match(e.request) || fetch(e.request));
});

2. 数据存储优化

IndexedDB：存储结构化大数据。
LocalStorage：小容量键值存储（≤5MB）。

七、性能监控与分析工具

Lighthouse：评估页面综合性能并生成优化建议。
Chrome DevTools：
- Performance 面板：分析运行时性能瓶颈。
- Memory 面板：检测内存泄漏。
- Coverage 面板：查找未使用的 CSS/JS 代码。
WebPageTest：多地点、多设备网络性能测试。

总结

移动端性能优化需围绕 加载速度、渲染效率、内存控制 和 网络优化 四个核心方向，结合工具分析瓶颈，针对性实施策略。关键原则：

首屏优先：确保关键内容快速呈现。
渐进增强：低端设备基础体验，高端设备增强效果。
持续监控：上线后通过性能日志持续追踪优化效果。

toB 和 toC 项目的区别

to B（business）即面向企业，to C（ customer）即面向普通用户 简单的事情重复去做，重复的事情用心去做，长期坚持，自然功成，无论是B端还是C端都同样适用。

在互联网和软件领域，ToB（To Business，企业服务） 和 ToC（To Consumer，消费者服务） 项目在产品设计、商业模式、运营策略等方面存在显著差异。以下是两者的核心区别对比：

一、核心差异对比

维度	ToB（企业服务）	ToC（消费者服务）
目标用户	企业、组织、机构（决策链复杂）	个人用户（决策简单）
用户生命周期	长（持续服务，注重长期价值）	短（用户流失率高，需高频触达）
客户关系	强关系（客户成功团队、专属服务）	弱关系（自动化服务为主）
技术复杂度	高（需对接企业系统、高安全性要求）	中低（侧重并发性能和用户体验）
市场策略	精准销售（行业峰会、标杆案例、渠道代理）	流量驱动（广告投放、社交裂变）

二、典型场景与案例

ToB 典型场景

ERP/CRM 系统（如 Salesforce、用友）
垂直行业解决方案（如 医疗 HIS 系统、金融风控平台）

ToC 典型场景

社交应用（微信、Instagram）
电商平台（淘宝、拼多多）

四、开发与运营策略差异

ToB 项目关键策略

标杆客户驱动：通过头部客户树立行业口碑（如“某 500 强企业已使用”）
定制化交付：提供私有化部署、二次开发接口（OpenAPI）
长周期服务：配备客户成功经理（CSM），定期需求复盘
合规性优先：数据本地化、权限分级、审计日志

ToC 项目关键策略

快速试错：MVP（最小可行产品）快速上线，数据验证假设
裂变增长：社交分享奖励（如“邀请好友得红包”）
用户分层运营：通过 RFM 模型区分高价值用户
A/B 测试优化：按钮颜色、文案都可能带来转化率提升

五、盈利模式对比

ToB 常见盈利模式	ToC 常见盈利模式
SaaS 订阅费（年/月付）	广告变现（信息流、开屏广告）
项目定制开发费	增值服务（会员、虚拟道具）
按用量计费（如 API 调用次数）	交易抽成（电商、直播打赏）
售后服务费（培训、运维）	数据变现（用户画像精准营销）

七、融合趋势：B2B2C 模式

随着产业互联网发展，B2B2C 模式逐渐兴起（如美团赋能餐饮商家服务消费者），其特点：

ToB 端：提供技术工具和供应链支持
ToC 端：通过 B 端间接触达最终用户
典型案例：有赞（赋能商家开店）、企业微信（连接企业与客户）

总结

ToB 的本质是服务升级：深度 解决企业效率问题，依赖专业性和信任。
ToC 的本质是体验革命：快速 满足个人需求，依赖流量和规模化。
选择逻辑：
- 资源有限时，优先做透单一领域（如垂直行业 ToB 或细分人群 ToC）。
- 长期发展需关注两者融合机会（如通过 ToB 能力构建 ToC 生态壁垒）。

Normalize.css

Normalize.css 是一个用于统一浏览器默认样式的现代 CSS 重置库，旨在保留有用的默认样式并修复浏览器间的显示差异，而非完全清除所有默认样式（如传统 Reset CSS 的做法）。以下是其核心特性和使用详解：

一、Normalize.css 的核心作用

1. 修复浏览器默认样式差异

统一元素默认样式：如 <h1> 标题的边距、<ul> 列表的项目符号样式。
修复已知浏览器 Bug：如 iOS 中 button 元素的字体继承问题。

2. 保留有价值的默认样式

不强制清除所有默认值：例如保留表单元素的默认外观，仅修复不一致性。
提升可访问性：确保 <button>、<input> 等元素在禁用 CSS 时仍可识别。

3. 模块化设计

按需引入部分样式（如仅修复表单相关样式）。

二、Normalize.css 与传统 Reset CSS 的区别

对比维度	Normalize.css	Reset CSS
目标	修复不一致性，保留合理默认样式	彻底清除所有默认样式
适用场景	需要跨浏览器一致的基线样式	需要完全自定义样式的项目
可维护性	高（明确注释、模块化）	低（需手动维护覆盖）
文件体积	约 8KB（未压缩）	通常更小（但需额外自定义）
典型代表	Normalize.css	Eric Meyer’s Reset

三、核心功能示例

1. 修复标题边距不一致

h1 {
  margin: 0.67em 0; /* 统一所有浏览器中的 h1 上下边距 */
}

2. 修复表单元素字体继承

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 确保表单元素继承父级字体 */
}

3. 修复图片基线对齐问题

img {
  vertical-align: middle; /* 避免图片下方出现间隙 */
}

四、使用 Normalize.css

1. 安装与引入

CDN 引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

npm 安装：

npm install normalize.css

import 'normalize.css'; // 在项目入口文件引入

2. 基础使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 引入 Normalize.css -->
  <link rel="stylesheet" href="normalize.css">
  <!-- 在此之后编写自定义样式 -->
  <style>
    body { font-family: Arial, sans-serif; }
  </style>
</head>
<body>
  <h1>标题样式已统一</h1>
  <button>按钮字体继承父级</button>
</body>
</html>

五、自定义扩展

1. 覆盖默认值

/* 在引入 Normalize.css 后覆盖 */
h1 {
  margin: 2rem 0; /* 增大标题边距 */
}

2. 按需引入模块（通过 Sass）

// 仅引入表单相关修复
@import "node_modules/normalize.css/normalize.css";
@include normalize-form;

六、兼容性与版本

支持浏览器：IE 10+、现代浏览器（Chrome、Firefox、Safari、Edge）。
最新版本：v8.0.1（截至2023年10月）。
维护状态：由 Nicolas Gallagher 维护，社区活跃。

七、常见问题

1. 与其他框架冲突（如 Bootstrap）

解决方案：确保 Normalize.css 在框架样式前引入，或使用框架内置的标准化方案（Bootstrap 已集成类似功能）。

2. 如何处理旧版本浏览器？

Normalize.css 已内置对旧浏览器的渐进增强支持（如 IE8 的部分修复）。

八、最佳实践

始终优先引入：在自定义样式前加载 Normalize.css。
结合自定义 Reset：如需清除更多默认样式，可在之后添加自定义重置规则。
定期更新：关注版本更新，获取最新浏览器修复。

总结

Normalize.css 是构建跨浏览器一致样式的基石工具，通过修复差异而非彻底重置，帮助开发者减少适配成本。其设计哲学是“修复问题，保留合理默认值”，尤其适合需要平衡标准化与开发效率的项目。

被动事件监听器 ⭐️

Passive Event Listeners（被动事件监听器） 是浏览器为了优化滚动性能而引入的一个特性，下面为你详细介绍。

问题背景

在处理滚动事件（如 touchmove、wheel 等）时，当为这些事件添加监听器并且在监听器中调用 event.preventDefault() 时，浏览器需要等待 JavaScript 代码执行完毕，才能确定是否阻止默认行为。由于 JavaScript 代码执行可能会有延迟，这就导致浏览器无法及时响应用户的滚动操作，从而出现滚动卡顿的现象。

解决方案

Passive Event Listeners 就是为了解决上述问题而出现的。通过将事件监听器标记为被动（passive: true），开发者可以告诉浏览器：这个监听器不会调用 event.preventDefault() 来阻止默认行为，因此浏览器可以立即响应用户的滚动操作，而无需等待 JavaScript 代码执行。

如何使用

在使用 addEventListener 方法添加事件监听器时，可以通过第三个参数来指定监听器是否为被动的。第三个参数可以是一个布尔值，也可以是一个对象，当使用对象时，可以设置 passive 属性。

示例代码

    <body>
        <script>
            // 传统的事件监听器添加方式
            window.addEventListener('touchmove', function (event) {
                // 这里可以处理触摸移动事件
            });

            // 使用被动事件监听器
            window.addEventListener('touchmove', function (event) {
                // 这里可以处理触摸移动事件
            }, { passive: true });
        </script>
    </body>

    </html>

在上述代码中，第一个 addEventListener 使用的是传统方式，浏览器需要等待该监听器执行完毕才能确定是否阻止默认行为；而第二个 addEventListener 通过 { passive: true } 将监听器标记为被动的，浏览器可以直接响应用户的滚动操作。

兼容性

目前，主流浏览器都已经支持 Passive Event Listeners。不过，为了确保代码在旧浏览器中也能正常工作，可以在使用时进行特性检测。

    let supportsPassive = false;
    try {
        const opts = Object.defineProperty({}, 'passive', {
            get: function () {
                supportsPassive = true;
            }
        });
        window.addEventListener("test", null, opts);
    } catch (e) {}

    // 根据检测结果添加事件监听器
    window.addEventListener('touchmove', function (event) {
        // 处理触摸移动事件
    }, supportsPassive ? { passive: true } : false);

注意事项

当将事件监听器标记为被动时，不能在监听器中调用 event.preventDefault()，否则浏览器会忽略该调用，并在控制台给出警告。
Passive Event Listeners 主要用于滚动相关的事件，如 touchmove、wheel 等，对于其他事件（如 click），一般不需要使用被动事件监听器。

优化对象池（Object Pooling）

对象池（Object Pooling）是一种优化技术，用于管理和重复利用对象，减少频繁创建和销毁对象的开销，在游戏开发、软件开发等领域广泛应用。以下是关于优化对象池的相关内容：

原理

在软件运行过程中，对象的创建和销毁（如在游戏中频繁生成和消失的子弹、敌人等对象，或程序中常被使用的数据库连接等对象）会消耗系统资源，包括内存分配与回收、CPU 运算等。对象池预先创建一定数量对象存储在 “池” 中，当需要对象时从池中获取，使用完后放回，避免频繁创建和销毁，从而提升性能、减少内存碎片及垃圾回收压力。

优化策略

合理确定初始容量：
- 容量过小，对象池很快耗尽，频繁创建新对象，失去池化意义；容量过大，会浪费内存资源。例如在游戏中，要根据场景中可能同时存在的对象最大数量预估来设置。如射击游戏子弹，可统计玩家最高射速及子弹存活时长，估算同时存在的最大子弹数，以此确定对象池初始容量。
优化对象管理逻辑：
- 高效的获取与归还机制：实现快速查找可用对象的算法，像使用队列、栈或哈希表等数据结构。以队列为例，新创建对象入队，获取时从队头取出，归还时从队尾插入，简单高效。
- 对象状态重置：对象归还时，确保其状态被正确重置。如游戏角色对象，需重置位置、生命值、技能冷却等属性，以便下次正常使用。
动态调整池大小：
- 运行时根据实际需求自动扩容或缩容。比如游戏中，玩家进入战斗场景，对象需求大增，若池对象不足，动态创建新对象加入；离开战斗场景，对象需求减少，可将一定时间未使用对象销毁，释放内存。
减少初始化开销：
- 对于创建成本高的对象，可采用延迟初始化。在对象第一次被获取使用时才进行初始化，而非创建对象池时就全部初始化。例如数据库连接对象，池中先只创建连接对象外壳，首次使用时再进行真正的数据库连接操作。
- 批量初始化技术，一次性创建多个对象，减少多次单独创建的开销。比如创建大量游戏道具对象时，用批量初始化可提高效率。
资源回收与复用：
- 对于有外部资源关联的对象（如文件句柄、网络连接等），在对象归还时，妥善处理资源释放与重置，确保下次获取能正常重新建立连接或打开文件。
- 对于可复用的资源，如纹理、模型等，在对象池管理中实现资源共享。比如多个游戏角色使用相同纹理，从对象池获取角色对象时，复用已加载纹理资源，避免重复加载。
错误处理与监控：
- 建立完善错误处理机制，对象创建失败、获取超时等情况发生时，能妥善处理，如记录日志、提供备用方案（临时创建新对象应急等）。
- 实时监控对象池状态，包括对象数量、使用频率、空闲时间等指标。根据监控数据，分析性能瓶颈，及时调整优化策略。

总之，通过上述优化策略能让对象池更好适应应用程序需求，提升整体性能和资源利用效率。

移动端手势

在移动端开发中，手势操作是用户与页面进行交互的重要方式，常见的手势包括点击、长按、滑动、缩放等。下面将介绍实现这些常见移动端手势的原理及示例代码。

实现原理

移动端手势的实现主要基于 HTML5 的触摸事件，这些事件会在用户触摸屏幕时触发。常见的触摸事件有：

touchstart：当手指触摸屏幕时触发。
touchmove：当手指在屏幕上移动时触发。
touchend：当手指从屏幕上移开时触发。
touchcancel：当触摸事件被中断（如系统弹窗等）时触发。

通过监听这些触摸事件，并根据事件的相关属性（如触摸点的坐标、触摸持续时间等），可以判断用户执行的手势。

WebView和原生是如何通信 ⭐️

在移动应用开发中，WebView 与原生应用的交互是实现混合应用（Hybrid App）的核心技术。以下是 Android 和 iOS 平台的双向通信实现方案及最佳实践：

一、交互原理

WebView 与原生应用的交互本质是 进程间通信（IPC），通过以下两种核心方式实现：

Web → Native
- JavaScript 调用原生方法（如访问相机、获取定位）
Native → Web
- 原生代码调用 WebView 内的 JavaScript 函数（如传递数据、触发事件）

二、Android 平台实现方案

1. JavaScript 调用 Native（Web → Native）

方法一：addJavascriptInterface 注入对象

// 原生代码定义接口类
public class JsBridge {
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

// WebView 配置
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsBridge(), "NativeBridge");

// Web 端调用
window.NativeBridge.showToast('Hello from Web!');

方法二：URL Scheme 拦截

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("native://")) {
            // 解析并执行原生操作
            return true; // 拦截请求
        }
        return false;
    }
});

// Web 端触发
location.href = 'native://action?param=value';

2. Native 调用 JavaScript（Native → Web）

// 执行无返回值函数
webView.loadUrl("javascript:updateData('" + jsonData + "')");

// 执行有返回值函数（Android 4.4+）
webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String result) {
        Log.d("Result", result); // 输出 3
    }
});

三、iOS 平台实现方案

1. JavaScript 调用 Native（Web → Native）

方法一：WKScriptMessageHandler 消息处理器

// 原生代码配置
let config = WKWebViewConfiguration()
let userContentController = WKUserContentController()
userContentController.add(self, name: "nativeBridge")
config.userContentController = userContentController

// 实现协议方法
func userContentController(_ controller: WKUserContentController, didReceive message: WKScriptMessage) {
    if message.name == "nativeBridge" {
        let body = message.body as! [String: Any]
        handleMessage(body)
    }
}

// Web 端调用
window.webkit.messageHandlers.nativeBridge.postMessage({action: 'share', data: 'text'});

方法二：URL Scheme 拦截（兼容 UIWebView）

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    if let url = navigationAction.request.url, url.scheme == "native" {
        handleNativeAction(url: url)
        decisionHandler(.cancel)
        return
    }
    decisionHandler(.allow)
}

// Web 端触发
location.href = 'native://action?param=value';

2. Native 调用 JavaScript（Native → Web）

// 调用无返回值函数
webView.evaluateJavaScript("updateData(\(jsonData))") { (result, error) in
    if let error = error {
        print("JS执行错误: \(error)")
    }
}

// 调用有返回值函数
webView.evaluateJavaScript("sum(1,2)") { (result, error) in
    if let result = result as? Int {
        print("计算结果: \(result)") // 输出 3
    }
}

四、跨平台最佳实践

1. 统一通信协议

定义 JSON 格式的通信协议：

{
  "action": "getLocation",
  "callbackId": "uuid123",
  "data": {}
}

2. 安全防护

Android：限制 @JavascriptInterface 方法为必要的最小集
iOS：使用 WKWebView 替代 UIWebView（更安全）
通用：验证 Web 来源域名，防止恶意注入

3. 异步回调处理

// Web 端封装 Promise
function callNative(action, data) {
    return new Promise((resolve, reject) => {
        const callbackId = generateUUID();
        window.nativeCallbacks[callbackId] = { resolve, reject };
        NativeBridge.postMessage({ action, data, callbackId });
    });
}

// 调用示例
callNative('getLocation', {})
    .then(location => console.log(location))
    .catch(err => console.error(err));

4. 调试工具

Android：Chrome DevTools chrome://inspect
iOS：Safari Develop Menu → Web Inspector

五、常见问题与解决方案

问题	原因	解决方案
Android 4.2以下无法调用	`@JavascriptInterface` 缺失	使用 URL Scheme 替代
iOS 无法接收消息	WKWebView 未正确配置	检查 `WKUserContentController` 配置
参数类型丢失	仅支持基本类型传输	复杂数据使用 JSON 序列化
内存泄漏	WebView 未及时销毁	在 Activity/Fragment 销毁时调用 `webView.destroy()`

六、性能优化建议

避免高频通信：合并多次操作为批量请求
使用二进制数据格式：传输大文件时使用 ArrayBuffer
预加载 WebView 池：提升 Hybrid 页面打开速度

通过以上方案，开发者可实现 WebView 与原生应用的高效、安全交互，构建体验接近原生的混合应用。

webview与原生应用交互

代码解释

display: flex：将容器设置为弹性容器。
flex-wrap: wrap：当元素超出容器宽度时，自动换行。
flex: 1 0 200px：设置元素的伸缩性和初始宽度。

以上这些方法可以单独使用，也可以结合使用，以实现更好的 H5 手机端适配效果。在实际开发中，需要根据项目的具体需求和设计要求选择合适的适配方案。

2X图 3X图适配

在移动应用开发和网页设计中，2X 图和 3X 图是与屏幕分辨率适配相关的概念，以下是具体介绍：

2X 图：也称为 @2x 图，是指图片的分辨率是普通屏幕（1X）分辨率的两倍。例如，在设计稿中一个按钮的尺寸是 100px×50px，那么对应的 2X 图的按钮尺寸就是 200px×100px。2X 图主要用于高清屏幕设备，如 iPhone 6、7、8 等系列手机，其屏幕像素密度较高，使用 2X 图可以保证图片在这些设备上显示清晰，不会出现模糊、锯齿等现象。
3X 图：即 @3x 图，其图片分辨率是普通屏幕分辨率的三倍。沿用上述例子，3X 图中该按钮的尺寸则为 300px×150px。3X 图通常用于更高像素密度的屏幕，如 iPhone X、iPhone 11 Pro 等机型。这些设备的屏幕具有更高的分辨率和更细腻的显示效果，使用 3X 图能够更好地适配其屏幕，让图片在这些设备上呈现出最佳的视觉效果。

使用 2X 图和 3X 图可以根据不同设备的屏幕像素密度来加载相应的图片资源，从而在保证图片质量的同时，也能合理控制应用或网页的资源占用，提升用户体验。

介绍一下2X图和3X图怎么适配

在 H5 页面中适配 2X 图和 3X 图，通常可以通过以下几种方式实现：

1、使用 CSS 媒体查询

通过 CSS 媒体查询，可以根据设备像素比来加载不同分辨率的图片。例如：

/* 普通屏幕（1x） */
.img {
  background-image: url('image.png');
}

/* 2x屏幕 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  .img {
    background-image: url('image@2x.png');
  }
}

/* 3x屏幕 */
@media only screen and (-webkit-min-device-pixel-ratio: 3),
       only screen and (min-device-pixel-ratio: 3) {
  .img {
    background-image: url('image@3x.png');
  }
}

上述代码中，根据-webkit-min-device-pixel-ratio或min-device-pixel-ratio属性来判断设备的像素密度，为不同像素密度的设备设置相应的背景图片。

2、使用 HTML 的`<picture>`元素

<picture>元素允许根据不同的条件选择不同的图片资源。示例代码如下：

<picture>
  <source media="(min-device-pixel-ratio: 3)" srcset="image@3x.png">
  <source media="(min-device-pixel-ratio: 2)" srcset="image@2x.png">
  <img src="image.png" alt="Image">
</picture>

在这个例子中，浏览器会根据设备的像素密度，按照<source>元素的顺序匹配并选择合适的图片。如果设备像素密度大于等于 3，则加载image@3x.png；如果大于等于 2，则加载image@2x.png；否则，加载普通的image.png。

3、使用 JavaScript 动态加载

通过 JavaScript 检测设备的像素密度，然后动态地为元素设置相应的图片源。示例代码如下：

window.addEventListener('load', function() {
  var img = document.getElementById('myImg');
  var pixelRatio = window.devicePixelRatio;

  if (pixelRatio >= 3) {
    img.src = 'image@3x.png';
  } else if (pixelRatio >= 2) {
    img.src = 'image@2x.png';
  } else {
    img.src = 'image.png';
  }
});

这段代码在页面加载完成后，获取设备的像素密度devicePixelRatio，并根据其值为id为myImg的图片元素设置相应的图片源。

无论使用哪种方法，都需要确保在设计和开发过程中，准备好不同分辨率的图片资源，并且图片的命名规范要保持一致，以便于管理和调用。

图片在安卓上，有些设备模糊问题

这个问题是 devicePixelRatio 的不同导致的，因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，所以苹果系统当初就把 iPhone 4 的 960×640 像素的分辨率在网页里更改为 480×320 像素，这样 devicePixelRatio = 2。而 Android 的 devicePixelRatio 比较乱，值有 1.5、2 和 3。为了在手机里更为清晰地显示图片，必须使用 2 倍宽高的背景图来代替 img 标签（一般情况下都使用 2 倍）。例如一个 div 的宽高是 100px×100px，背景图必须是 200px×200px，然后设置 background-size:contain 样式，显示出来的图片就比较清晰了。

固定定位布局键盘挡住输入框内容

当遇到 H5 页面中固定定位布局的输入框被键盘挡住的问题时，可以尝试以下几种解决方案：

利用 scrollIntoView 方法：监听输入框的focus事件，在事件回调中使用scrollIntoView方法让输入框滚动到可视区域内。例如：

const inputElement = document.getElementById('your-input-id');
inputElement.addEventListener('focus', () => {
    inputElement.scrollIntoView({
        behavior: 'smooth', // 平滑滚动
        block: 'center', // 垂直居中
        inline: 'nearest' // 水平方向最近边缘
    });
});

也可以在setTimeout中执行scrollIntoView，给页面渲染留一些时间，以在某些机型上获得更好的效果。

监听事件调整滚动位置：
- 监听输入框获取焦点事件：获取输入框的位置信息，计算出需要滚动的距离，然后使用window.scrollTo方法滚动页面，让输入框在键盘弹出时处于可视区域。如下面的代码可以使页面在输入框获得焦点时自动向上滚动，避免输入框被遮挡：

const inputFields = document.querySelectorAll('input, textarea');
inputFields.forEach(field => {
    field.addEventListener('focus', () => {
        window.scrollTo(0, field.getBoundingClientRect().top + window.pageYOffset - 100);
    });
});

监听窗口 resize 事件：通过监听resize事件，根据窗口高度变化来判断键盘是否弹出，并动态调整页面滚动位置或输入框的margin-bottom等样式属性，为软键盘腾出空间。示例代码如下：

window.addEventListener('resize', function() {
    // 获取键盘的高度
    var keyboardHeight = window.innerHeight - document.documentElement.clientHeight;
    // 调整页面布局，确保输入框不被键盘遮挡
    document.querySelector('.input-box').style.marginBottom = keyboardHeight + 'px';
});

调整 viewport 设置：确保 HTML 头部包含合适的viewport配置，例如<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，这可以帮助浏览器在进入输入框时自动调整页面的缩放比例，从而避免遮挡现象。
使用第三方库：引入一些专门处理移动端兼容性问题的库，如iscroll、better - scroll等，这些库提供了更多的功能和灵活性来处理页面滚动和布局问题，有助于解决输入框被键盘遮挡的情况。
避免或调整固定定位布局：如果可能，尽量避免使用固定定位布局在底部的元素，因为软键盘弹出时可能会导致这些元素被顶上去，遮挡输入框。如果无法避免固定定位，可以在软键盘弹出时动态调整这些元素的位置，例如通过修改top、bottom等属性来让输入框避开键盘的遮挡。

click的300ms延迟问题和点击穿透问题

在移动端开发中，click事件的 300ms 延迟和点击穿透问题是比较常见的问题，下面为你详细介绍这两个问题及其解决方案。

300ms 延迟问题

问题产生原因

在早期，移动浏览器为了实现双击缩放（Double Tap to Zoom）的功能，当用户点击屏幕时，浏览器并不会立即触发 click 事件，而是会等待大约 300ms，以判断用户是否有双击操作的意图。如果在这 300ms 内用户没有进行第二次点击，浏览器才会触发 click 事件。

解决方案

1. 设置 viewport

在 HTML 文件的 <head> 标签中添加如下 meta 标签：

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

上述代码通过设置 user-scalable=no 禁止用户手动缩放页面，浏览器就会认为不需要实现双击缩放功能，从而消除 300ms 延迟。

2. 使用 FastClick 库

FastClick 是一个专门解决移动端 click 事件 300ms 延迟的 JavaScript 库。使用方法如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 FastClick 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
    </script>
</head>

<body>
    <button id="myButton">点击我</button>
    <script>
        const myButton = document.getElementById('myButton');
        myButton.addEventListener('click', function () {
            alert('按钮被点击了');
        });
    </script>
</body>

</html>

上述代码中，通过引入 FastClick 库并调用 FastClick.attach 方法，将其应用到整个页面，从而消除 click 事件的 300ms 延迟。

3. 使用 touch 事件替代

问题产生原因

点击穿透问题通常发生在使用 touch 事件隐藏一个元素后，下面的元素会触发 click 事件。这是因为 touch 事件没有 300ms 延迟，而 click 事件有 300ms 延迟。当用户点击一个元素触发 touch 事件隐藏该元素后，300ms 后 click 事件触发，此时点击的位置如果有其他元素，就会触发该元素的 click 事件。

解决方案

1. 避免同时使用 `touch` 和 `click` 事件

尽量避免在同一个元素或相邻元素上同时绑定 touch 和 click 事件。如果需要处理点击操作，统一使用 touch 事件或使用上述方法消除 click 事件的 300ms 延迟。

2. 阻止默认行为

在 touch 事件处理函数中调用 event.preventDefault() 来阻止默认行为，从而避免触发 click 事件。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="overlay">
        <button id="closeButton">关闭</button>
    </div>
    <button id="bottomButton">底部按钮</button>
    <script>
        const overlay = document.getElementById('overlay');
        const closeButton = document.getElementById('closeButton');
        const bottomButton = document.getElementById('bottomButton');

        closeButton.addEventListener('touchend', function (event) {
            event.preventDefault();
            overlay.style.display = 'none';
        });

        bottomButton.addEventListener('click', function () {
            alert('底部按钮被点击了');
        });
    </script>
</body>

</html>

上述代码中，在 closeButton 的 touchend 事件处理函数中调用 event.preventDefault()，避免触发 click 事件，从而解决点击穿透问题。

phone及ipad下输入框默认内阴影

上下拉动滚动条时卡顿、慢

移动端上下拉动滚动条时卡顿、慢，除了上述提到的一些通用原因外，还有一些与移动端特定相关的因素及解决方法：

移动设备性能差异

原因：不同移动设备的硬件性能参差不齐，包括 CPU 处理能力、GPU 性能以及内存大小等。一些低端设备在处理复杂页面或大量数据时容易出现性能瓶颈，导致滚动卡顿。
解决方案：针对性能较低的设备，采用渐进式增强的策略。在页面加载时，根据设备的性能情况，动态调整页面的展示效果。例如，对于低端设备，减少动画效果、简化页面布局，或者采用虚拟列表技术来展示大量数据，只渲染可见区域的列表项，而不是一次性加载所有项。

触摸事件处理不当

原因：在移动端，触摸事件的处理方式会直接影响滚动性能。如果在触摸事件处理函数中执行了过多的复杂操作，或者没有正确处理触摸事件的冒泡和捕获，可能会导致滚动卡顿。
解决方案：优化触摸事件处理函数，尽量减少在触摸事件中进行的计算和 DOM 操作。可以使用 touchstart、touchmove 和 touchend 事件来替代传统的 mousedown、mousemove 和 mouseup 事件，并确保在处理触摸事件时，正确地阻止默认行为和事件冒泡，以避免不必要的性能开销。例如，在实现自定义滚动条时，要正确处理触摸事件，确保滚动的流畅性。

移动端浏览器的兼容性问题

原因：不同的移动端浏览器在渲染引擎、性能优化以及对 CSS 和 JavaScript 的支持上存在差异，这可能导致在某些浏览器中出现滚动卡顿的问题。
解决方案：进行充分的浏览器兼容性测试，针对不同浏览器的问题采取相应的解决方案。例如，在某些安卓浏览器中，可能需要使用特定的 CSS 属性来优化滚动性能，如 overflow - scroller: touch，它可以提供更流畅的滚动体验。另外，对于一些浏览器不支持的特性，要提供相应的降级方案。

网络因素

原因：如果页面依赖大量的网络资源加载，如 JavaScript 文件、CSS 文件或图片等，在网络条件不佳的情况下，资源加载缓慢会导致页面渲染不及时，进而使滚动出现卡顿。
解决方案：优化网络资源加载，采用缓存策略，将常用的资源缓存在本地，减少网络请求次数。对于首屏加载的关键资源，进行优先级排序，确保重要资源先加载。同时，可以使用 CDN（内容分发网络）来加速资源的分发，提高加载速度。在网络条件较差的情况下，提供相应的加载提示或降级方案，如显示占位符或简化页面内容。

长时间按住页面出现闪退

ios和android下触摸元素时出现半透明灰色遮罩

transiton闪屏

在 CSS 中使用transition属性时出现闪屏现象，通常是由于浏览器在渲染过渡效果时出现了性能问题或兼容性问题。以下是一些可能的解决方法：

使用硬件加速：可以通过将元素的transform属性设置为一个非默认值（如translateZ(0)或scale(1)）来启用硬件加速，让浏览器使用 GPU 来渲染元素，提高性能，减少闪屏现象。例如：

.element {
  transition: all 0.3s ease;
  transform: translateZ(0);
}

优化过渡属性：避免过度使用复杂的过渡效果或同时过渡多个属性。尽量只对必要的属性进行过渡，并且选择简单的过渡函数，如ease、linear等，以降低浏览器的渲染压力。
确保元素尺寸稳定：如果元素的尺寸在过渡过程中发生变化，可能会导致重排和重绘，从而引发闪屏。尽量确保元素在过渡前后的尺寸保持一致，或者使用transform属性来实现位置和大小的变化，而不是直接修改width、height等属性。
处理兼容性问题：不同浏览器对transition的支持和渲染方式可能有所不同。可以使用浏览器前缀来确保在各种浏览器中都能正确应用过渡效果，并检查是否存在已知的浏览器兼容性问题。例如：

.element {
  -webkit-transition: all 0.3s ease; /* Safari 和 Chrome */
  -moz-transition: all 0.3s ease; /* Firefox */
  -o-transition: all 0.3s ease; /* Opera */
  transition: all 0.3s ease;
}

检查页面其他因素：有时候闪屏问题可能是由页面上的其他元素或脚本引起的。检查是否有其他动画、JavaScript 代码或 CSS 样式影响了过渡元素的渲染，尝试逐个排除可能的干扰因素。

如果上述方法仍然无法解决问题，可以提供更多关于代码和页面的详细信息，以便更具体地分析和解决闪屏问题。

圆角bug

示例代码（使用 Tailwind CSS）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <input type="text" class="border border-gray-300 p-2 rounded mb-2 w-full" value="普通输入框">
    <input type="text" class="border border-gray-300 p-2 rounded mb-2 w-full bg-gray-100 text-gray-400 cursor-not-allowed"
        value="禁用输入框" disabled>
    <textarea class="border border-gray-300 p-2 rounded mb-2 w-full">普通文本域</textarea>
    <textarea class="border border-gray-300 p-2 rounded mb-2 w-full bg-gray-100 text-gray-400 cursor-not-allowed"
        disabled>禁用文本域</textarea>
    <select class="border border-gray-300 p-2 rounded mb-2 w-full">
        <option>普通下拉框选项</option>
    </select>
    <select class="border border-gray-300 p-2 rounded mb-2 w-full bg-gray-100 text-gray-400 cursor-not-allowed"
        disabled>
        <option>禁用下拉框选项</option>
    </select>
</body>

</html>

代码解释

Tailwind CSS 提供了一系列的类名，通过添加这些类名可以快速为表单元素设置统一的样式，包括禁用状态的样式。

移动端兼容性

以下是移动端兼容性问题的全面总结及解决方案，涵盖常见场景、主流设备与浏览器适配策略：

一、常见兼容性问题与解决方案

1. 样式兼容性

问题1：1px边框变粗（Retina屏幕）
原因：高 DPR 设备将 1px 渲染为多物理像素。
解决：

.border-1px {
  position: relative;
}
.border-1px::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #333;
  transform: scale(0.5);
  transform-origin: 0 0;
}

问题2：iOS/Android默认样式差异
解决：
- 使用 Normalize.css 或 Reset CSS 统一基础样式。
- 自定义输入框、按钮样式：
```
input, button {
  -webkit-appearance: none; /* 去除iOS默认样式 */
  border-radius: 0; /* 统一圆角 */
}
```

2. 交互兼容性

问题1：点击延迟（300ms延迟）
解决：

引入 FastClick 库：

if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}

使用 CSS 禁用缩放：

html {
  touch-action: manipulation; /* 禁用双击缩放 */
}

问题2：滚动卡顿（iOS/Android）
解决：

.scroll-container {
  -webkit-overflow-scrolling: touch; /* iOS弹性滚动 */
  overflow-scrolling: touch;
  overscroll-behavior: contain; /* 防止滚动穿透 */
}

3. 功能兼容性

问题1：日期选择器（<input type="date">）样式不一致
解决：
- 使用第三方库（如 Flatpickr、Vant DatetimePicker）统一体验。
- 回退方案：
```
<input type="text" placeholder="选择日期" class="custom-date-input">
```

问题2：WebView中 localStorage 失效
解决：

使用 cookie 或 IndexedDB 替代。

检测并降级处理：

try {
  localStorage.setItem('test', '1');
} catch (e) {
  console.error('localStorage不可用');
}

二、设备与浏览器适配策略

1. 主流浏览器内核适配

浏览器	内核	适配要点
iOS Safari	WebKit	1px边框、弹性滚动、输入框聚焦放大
Chrome for Android	Blink	视频自动播放、PWA支持
微信内置浏览器	X5内核	视频播放控件、页面分享白屏问题
UC浏览器	U3内核	CSS3动画兼容性、ES6支持度

2. 操作系统差异处理

iOS特有问题：

输入框聚焦页面放大：

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

滑动卡顿：

body {
  -webkit-overflow-scrolling: touch;
}

Android特有问题：

低版本WebView兼容性：

// 检测WebView版本
const ua = navigator.userAgent;
const androidWebViewVersion = ua.match(/Android.*AppleWebKit\/(\d+)/i);

三、兼容性测试与工具

1. 测试工具

BrowserStack：多设备云测试平台。
Chrome DevTools：设备模拟器（支持DPR调试）。
Weinre：远程调试移动端页面。

2. 自动化检测

ESLint + Babel：确保代码兼容 ES5+。

PostCSS：自动添加 CSS 前缀：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({ grid: true })
  ]
}

3. 真机测试清单

iOS：iPhone 6/7/8（旧机型）、iPhone 13/14（新机型）、iPad。
Android：小米（MIUI）、华为（EMUI）、三星（One UI）等品牌主流机型。

四、兼容性最佳实践

1. 渐进增强与优雅降级

核心内容优先：确保基础功能在所有设备可用。

增强特性检测：

if ('IntersectionObserver' in window) {
  // 使用现代API实现懒加载
} else {
  // 回退到传统滚动监听
}

2. 动态Polyfill加载

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6,fetch"></script>

3. 统一开发规范

CSS：使用 rem + Flex/Grid 布局。
JavaScript：避免使用 document.write、eval。

资源加载：WebP图片自动降级：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

五、高频问题速查表

问题现象	解决方案	代码示例
iOS输入框内阴影	`-webkit-appearance: none`	[见样式兼容性章节]
Android键盘遮挡输入框	滚动至可视区域	`element.scrollIntoViewIfNeeded()`
微信浏览器白屏	检查 HTTPS 证书、禁用缓存	服务端配置 `Cache-Control: no-store`
低版本iOS无法播放视频	使用 MP4 格式并添加 `playsinline` 属性	`<video playsinline>`

总结

移动端兼容性处理的核心逻辑：

分层适配：基础功能全兼容，增强特性渐进式。
动态检测：通过特性检测而非UA判断能力。
统一工具链：利用构建工具自动化处理前缀、Polyfill。
真机验证：覆盖主流OS版本及浏览器内核。

web移动端精选面试题

前端手机端开发的高频面试题

一、移动端适配方案

1. 视口（Viewport）配置

2. 布局方案

3. 1px 边框问题

二、移动端事件处理

1. 点击延迟（300ms 问题）

2. 触摸事件（Touch Events）

3. 点透问题

三、性能优化

1. 加载优化

2. 渲染优化

3. 内存管理

四、兼容性问题

1. iOS 滑动卡顿

2. Android 输入框被键盘遮挡

3. iOS 日期输入框兼容

五、Hybrid 开发相关

1. JSBridge 通信原理

2. WebView 优化

六、高频面试题示例

总结

一、性能优化深度实践

1. 首屏秒开率优化（从 5s 到 1s 的进阶方案）

2. 内存泄漏定位与修复

二、框架与工程化深度

1. React Native 性能瓶颈与优化

2. Webpack 深度定制（移动端场景）

三、复杂交互与架构设计

1. 高流畅度手势动画实现

2. 跨 WebView 通信架构设计

四、前沿技术实践

1. PWA 离线化深度实践

2. WebAssembly 在移动端的应用

五、开放设计题

1. 设计一个高可用的移动端错误监控系统

2. 从零设计一个跨端移动框架

六、底层原理探究

1. 浏览器渲染合成层（Composite Layer）原理

2. V8 隐藏类（Hidden Class）与内存优化

总结

移动布局方案

Rem, Em ⭐️

一、rem单位如何转换为像素值

二、em是如何转换成px的

三、em单位的继承效果

总结

优缺点

flex布局及优缺点

一、REM 布局核心原理

二、REM 布局实现步骤

1. 设置 Viewport

2. 动态计算根字体大小

四、自动化工具

1. PostCSS 插件（自动 PX 转 REM） postcss-pxtorem⭐️

2. Webpack 集成

总结

百分比布局

一、百分比布局的核心规则

1. 基准参照规则

2. 计算公式

二、常见应用场景

2. 自适应图片容器

3. 响应式间距控制

三、百分比布局的局限性

1. 父元素尺寸未明确

2. 高度百分比失效

3. 边框与盒模型影响

五、实战技巧

1. 动态计算（calc()）

2. 避免百分比嵌套陷阱

七、最佳实践总结

说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别? ⭐️

1. 设备像素（Physical Pixel）

2. CSS 像素（CSS Pixel）

3. 设备独立像素（Device Independent Pixel, DIP/DP）

4. 设备像素比（Device Pixel Ratio, DPR）

解决方法：

5. 像素密度（PPI: Pixels Per Inch）

2. `Android 输入框被键盘遮挡`

1. PostCSS 插件（自动 PX 转 REM） `postcss-pxtorem`⭐️

4. `设备像素比`（Device Pixel Ratio, `DPR`）

3. `适配不同 DPR（媒体查询`）

3. 合理使用 `will-change 提前告知浏览器优化`