腾讯-音乐 · 第 1 轮 · 二面

Fri, 25 Jul 2025 07:26:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块

题目要点

结合自己简历上的一个亮点项目准备

参考答案

结合自己简历上的一个亮点项目准备

2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题库原题：什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题目要点

响应式设计（Responsive Design）是一种网页设计方法，旨在使网页在各种设备和屏幕尺寸上都能提供良好的用户体验。响应式设计通过使用流式布局、弹性网格和媒体查询，使得网页能够根据不同的设备特性（如屏幕大小、分辨率、方向等）自动调整其布局和内容。

响应式设计的基本原理

流式布局（Fluid Layouts）：
- 使用相对单位（如百分比、vw、vh）而不是绝对单位（如像素），使得网页布局能够根据容器的宽度自动调整。例如，使用百分比设置宽度，可以让列宽度随着屏幕尺寸的变化而变化。
弹性网格（Flexible Grid Systems）：
- 利用网格系统设计布局，将页面划分为多个灵活的区域。这些区域能够根据屏幕尺寸调整大小，从而实现不同设备上的适配。
媒体查询（Media Queries）：
- 使用 CSS 媒体查询，根据设备的特性（如宽度、高度、分辨率等）应用不同的样式规则。媒体查询可以针对不同的屏幕尺寸、方向（横向或纵向）等条件设置样式。

如何实现响应式设计

使用流式布局：
- 在 CSS 中使用相对单位（如 %, em, rem, vh, vw）设置宽度和高度。例如：
```
.container {
 width: 80%; /* 宽度为容器的 80% */
}
```

利用弹性网格系统：

创建一个弹性网格布局，可以使用 CSS Grid 或 Flexbox。例如，使用 Flexbox：

.container {
 display: flex;
 flex-wrap: wrap; /* 自动换行 */
}
.item {
 flex: 1 1 300px; /* 自动调整宽度，最小宽度为 300px */
 margin: 10px;
}

编写媒体查询：

腾讯-音乐 · 第 1 轮 · 一面

Fri, 25 Jul 2025 07:17:59 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： 动画、响应式设计、事件循环、跨域、浏览器的缓存机制、列表和key、生命周期

本轮共 16 道题。答案默认折叠，便于先自行作答。

1. 请介绍一下你的科研项目经历。

题目要点

STAR法则

参考答案

结合自身经历展开

2. 为什么选择前端开发作为你的职业方向？

题目要点

无

参考答案

无

3. 你学习前端开发有多久了？谈谈你的学习经历。

题目要点

无

参考答案

无

4. 如何使用CSS实现动画效果？举个项目中的例子。

题目要点

transition/animation 区别 / transform+opacity / 项目落地举例 / 动画性能

参考答案

考察点

● CSS 动画相关属性与原理掌握

面试官希望了解候选人是否掌握 CSS 动画的基本实现方式，包括 transition、animation、关键帧、补间函数等。

● 能结合项目场景举例说明

不仅要懂 API，更重要的是知道什么时候使用、为什么使用，是否有性能考量和交互体验意识。

● 对动画效果的性能与体验理解

是否清楚哪些动画对性能影响大，哪些动画适合用 CSS 实现，如何避免卡顿或丢帧。

参考答案

原理说明

一、CSS 动画的实现方式

CSS 提供了两类动画机制：

1. 过渡动画（transition）

通过 transition 属性定义在样式变更时自动补间的动画：

.button {
 transition: all 0.3s ease-in-out;
}

特点：

腾讯-音乐 on Last Stand

腾讯-音乐 · 第 1 轮 · 二面

1. 讲一下“智慧医疗系统”项目背景、目标以及你主要负责的模块

题目要点

2. 什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

题目要点

响应式设计的基本原理

如何实现响应式设计

腾讯-音乐 · 第 1 轮 · 一面

1. 请介绍一下你的科研项目经历。

题目要点

2. 为什么选择前端开发作为你的职业方向？

题目要点

3. 你学习前端开发有多久了？谈谈你的学习经历。

题目要点

4. 如何使用CSS实现动画效果？举个项目中的例子。

题目要点

考察点

● CSS 动画相关属性与原理掌握

● 能结合项目场景举例说明

● 对动画效果的性能与体验理解

参考答案

原理说明

一、CSS 动画的实现方式

1. 过渡动画（transition）