响应式等功能点

s

一些小功能点就不再另起文件记录，整理在此文件。

响应式

使用媒体查询判断屏幕尺寸的大小进而给出对应的 CSS 样式。这里结合 sass 预设一些尺寸。

给出定义：

• xsm: 屏幕像素小于 600px
• sm: 屏幕像素介于 600px 到 1024px 之间
• md: 屏幕像素介于 1024px 到 1440px 之间
• lg: 屏幕像素介于 1440px 到 1920px 之间
• xlg: 屏幕像素大于 1920px

@mixin xsm {
  @media (width <= 600px) {
    @content;
  }
}

@mixin sm {
  @media (600px < width <= 1024px) {
    @content;
  }
}

@mixin md {
  @media (1024px < width <= 1440px) {
    @content;
  }
}

@mixin lg {
  @media (1440px < width <= 1920px) {
    @content;
  }
}

@mixin xlg {
  @media (width > 1920px) {
    @content;
  }
}

在组件中使用：

@include xsm {
  .logo {
    width: 320px;
  }
}

@include sm {
  .logo {
    width: 400px;
  }
} ;

不过有时在不同屏幕尺寸下的 DOM 结构不同，所以并不能完全依靠 CSS 的媒体查询完全做到响应式。这里需要在 React 中根据屏幕尺寸给出渲染的组件结构。

这里使用 context 来实现。

// TODO

还有一个问题，静态页面实在服务端生产的，并不知道客户端的屏幕尺寸信息。这时候可以通过 http 请求的 user-agent 请求头判断当前客户端屏幕尺寸信息。 // TODO

备注

px -> rem 转换的意义

动画

如何在切换主题时重新播放动画？

这里使用 window 的 requestAnimationFrame 方法。方法出入一个回调寒函数，该回调函数载浏览器重绘前调用。

useEffect(() => {
  mainRef.current?.classList.remove(styles.withAnimation);
  window.requestAnimationFrame(() => {
    mainRef.current?.classList.add(styles.withAnimation);
  });
}, [theme]);

// TODO