2025.2.20

react 和 vue 对比

react 和 vue 区别

mobX 和 redux 的区别

Redux 与 Mobx 对比

通过什么渠道学习新知识

现在还有再学习什么

博客怎么没有更新了

自己在过往经历中主要承担什么角色

react 组件什么情况下会刷新

1. 状态（state）变化。

2. 属性（props）变化。

3. 父组件重新渲染。

4. Context 值变化。

5. 强制刷新（不推荐）。

6. Hooks 依赖项变化。

7. Key 的变化。

有用到 hooks 相关的吗

reactHooks

es5 和 es6 有什么不同

你觉得自己的广度和深度怎么样

有遇到什么兼容性的问题吗

css 响应式布局怎么做

1. 使用 meta viewport 标签设置视口 首先，在 HTML 文件的标签中，使用 meta 标签来设置视口的宽度。这个标签告诉浏览器页面宽度应该等于设备的屏幕宽度，并且设置缩放比例。

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

width=device-width：使页面的宽度与设备屏幕宽度一致。 initial-scale=1.0：设定初始的缩放级别为 1，即没有缩放。

1. 使用 CSS 媒体查询

媒体查询是响应式设计的核心，它根据设备的不同屏幕尺寸、分辨率等条件来应用不同的 CSS 规则。

/* 默认样式 */
body {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

/* 屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* 屏幕宽度大于等于1024px时应用 */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

1. 灵活的布局 使用 flexbox：

.container {
  display: flex;
  flex-wrap: wrap;
}

使用 grid： Grid 布局可以通过定义行和列来创建复杂的布局，也可以根据设备屏幕大小调整行列的数量。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

1. 图片响应式 图片响应式是指根据设备屏幕的大小来调整图片的大小，以适应不同的屏幕尺寸。

img {
  max-width: 100%;
  height: auto;
}

或者使用 srcset 属性：

<img
  src="small.jpg"
  srcset="medium.jpg 1000w, large.jpg 2000w"
  alt="Responsive image"
/>

srcset：指定不同宽度的图片以便在不同的屏幕上加载合适的图片。

sizes：告诉浏览器在哪些条件下使用哪些图片尺寸。

1. 使用相对单位 使用相对单位（如 em、rem、vw、vh）可以根据父元素或视口的大小来调整元素的大小，从而实现响应式布局。

.container {
  font-size: 2em;
}

跟 ai 相关的功能