每周技术总结-2025w1

2025-01-05#css #html #nuxt

这一周，在开发过程中探索了多个有趣且实用的技术问题，以下是我的总结，希望对你有所启发。

1. 优化社交媒体分享：使用 `<meta>` 标签

在社交媒体分享内容时，正确设置 <meta> 标签可以显著提升用户体验和点击率。以下是一些关键的 <meta> 标签及其作用：

标题和描述
使用 og:title 和 og:description 提供清晰的标题和描述。

<meta property="og:title" content="如何优化社交媒体分享？">
<meta property="og:description" content="了解通过meta标签设置，提升社交媒体分享的效果！">

分享图片
设置 og:image，以确保社交平台展示合适的图片。
<meta property="og:image" content="https://example.com/your-image.jpg">

分享链接和类型
使用 og:url 和 og:type 提供资源的链接和类型（如网站或文章）。

<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">

Facebook 和 Twitter 等平台还支持定制的标签，如 Twitter 的 twitter:card。通过正确的标签设置，可以有效吸引用户点击分享链接。

2. Nuxt 中的 `definePageMeta`：避免页面 `name` 冲突

在使用 Nuxt.js 时，我发现如果两个页面的 name 属性相同，会导致其中一个页面无法访问。这是因为 name 属性在 Vue 路由中必须是唯一的。

问题现象：

假如有两个页面：

// page1.vue
export default definePageMeta({
  name: "examplePage"
});

// page2.vue
export default definePageMeta({
  name: "examplePage"
});

访问其中一个页面时，会偶尔跳转到另一个页面，或者直接报错。

解决方法：

确保每个页面的 name 属性唯一，或者完全移除 name 属性，由 Nuxt 自动管理：

export default definePageMeta({
  name: "uniquePageName1"
});

或

export default definePageMeta({});

在大型项目中，为了避免这种冲突，可以制定页面命名规则，如以模块名或路径前缀为基础。

3. CSS 中的 `translate3D` 对 `z-index` 的影响

translate3D 是一个用于定位元素的 CSS 属性，可以启用硬件加速。然而，当使用 translate3D 后，会对 z-index 层级产生影响。

现象描述：

.box1 {
  position: absolute;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.box2 {
  position: absolute;
  z-index: 2;
}

尽管 box2 的 z-index 更高，但在某些情况下，box1 会被渲染在上方。这是因为 translate3D 创建了一个新的上下文（stacking context）。

解决办法：

避免不必要的 translate3D 使用
如果不需要硬件加速，尽量避免使用 translate3D 或 transform。
transform: none;
显式指定层级关系
如果必须使用 translate3D，可以通过调整父元素的 z-index 或使用其他样式规则来修正。
position: relative; z-index: 100; /* 显式提升层级 */

案例分析

借助swiper-js实现一个Free Mode的Timeline效果，slide元素内添加一个伪元素，伪元素使用position: absolute;脱离标准文档流，需要使伪元素的z-index能够高于左右两侧的slide，达到视觉效果上串联各个slide的效果。

实际实现后发现伪元素始终只能覆盖左侧的slide，右侧无法覆盖。

实际上swiper-js的样式表中，开启了slide的translateZ，这就导致了每一个slide都是一个独立的渲染层。slide内的伪元素的z-index只能影响到自身所在的渲染层，无法对下一个slide的z-index产生影响。

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
}

解决方案有两种

取消translateZ
保留translateZ，对每一个swiper-slide设置从大到小的z-index，显式设定每一个slide的层级关系

4. 利用 `em` 实现响应式缩放

为实现 PC 和移动端的响应式设计，em 是一个灵活且强大的单位。

为什么选择 `em`？

相对性：em 的大小是相对于父元素的字体大小和自身的字体大小，便于按比例缩放。
灵活性：相比于固定像素，em 更适用于响应式设计。

和translate scale有什么区别？

scale 缩放时元素在文档流中占据的空间不变，适合应用在脱离标准文档流的元素上。

em的实现方式更加的灵活，适合标准文档流中的元素，同时也适用于需要基于元素大小进行交互的场景。

实现局部响应式设计：

全局局部祖先容器的字体大小
设置局部祖先容器 div.container 的字体大小，以实现统一的缩放基础，设置1px是便于在开发时进行计算。
.container { font-size: 1px; /** 移动端优先 */ } @media (min-width: 768px) { .container { font-size:2px; /** PC端x2 */ } }
使用 em 进行布局
子元素尺寸根据 em 进行定义，能随着 div.container 字体大小调整。
.children { width: 30em; /* 自动适配 PC 和移动端 */ padding: 2em; }
动态缩放
通过修改根字体大小，可以实现更精细的缩放控制。

注意事项：

在复杂项目中，混用 em 和 rem（相对于根的字体大小）可能更合适。em针对布局进行调整，rem则针对全局适配。
需要注意子元素的字体大小会受父元素影响。

总结

这一周的技术探索涵盖了前端开发中多个实用技巧：优化社交媒体分享内容、解决 Nuxt 路由冲突问题、深度解读 translate3D 的行为，以及使用 em 构建响应式布局。这些问题虽小，但各有深意。希望这些分享能为你的开发工作带来启发！如果你有任何问题或想法，欢迎留言讨论。

HBB's Blog