admin
34c8e2db4e
- Added PageScaffold component for shared page layout with safe-area padding and scroll management. - Introduced ResponsiveMobileShell for mobile canvas layout with customizable backgrounds. - Created ScrollablePage component for scrollable content areas. - Updated CSS styles for coins rules screen, sidebar components, and subscription sections to use responsive design tokens. - Added viewport CSS variables provider to synchronize CSS variables with the visual viewport. - Refactored breakpoints and dimensions for better responsiveness across devices.
24 lines
699 B
TypeScript
24 lines
699 B
TypeScript
/**
|
|
* 响应式断点常量
|
|
*
|
|
*
|
|
*
|
|
* 与 `src/tokens/breakpoints.css` 中的 CSS 变量保持一致：
|
|
* - 客户端运行时检查（matchMedia）通过 `useBreakpoint` hook
|
|
* - 服务端 / 客户端 CSS 通过 `src/tokens/breakpoints.css` 的 media query
|
|
*/
|
|
export const Breakpoints = {
|
|
/** 手机设备最大宽度。 */
|
|
mobileMaxWidth: 599.98,
|
|
/** 移动端画布最大宽度，来自 1080px @2x 设计稿。 */
|
|
shellMaxWidth: 540,
|
|
/** 平板设备最小宽度 */
|
|
tabletMinWidth: 600,
|
|
/** 平板设备最大宽度 */
|
|
tabletMaxWidth: 1023,
|
|
/** 桌面设备最小宽度 */
|
|
desktopMinWidth: 1024,
|
|
} as const;
|
|
|
|
export type DeviceSize = "mobile" | "tablet" | "desktop";
|