Files
zhimingge/components/layout/site-width.ts
T
dekun 1d887a7a10 Add responsive content width for ultrawide while keeping 1080p layout.
Scale from 896px on 1080p up to 1440px on 3440px screens via viewport breakpoints in site-width.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 00:46:39 +08:00

19 lines
768 B
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 响应式内容宽度(类名须完整书写,供 Tailwind 扫描)
* - ≤1920px1080p):约 896px
* - 1921px+(超宽入门):约 1152px
* - 2560px+(带鱼屏):约 1280px
* - 3440px+(超宽带鱼):约 1440px
*/
export const SITE_PAD = "px-4 sm:px-6 lg:px-8";
export const SITE_WIDTH =
`w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;
export const SITE_WIDTH_NARROW =
`w-full max-w-3xl ${SITE_PAD} min-[1921px]:max-w-4xl min-[2560px]:max-w-5xl min-[3440px]:max-w-6xl`;
/** 页眉 / 页脚内层,与主内容同宽 */
export const SITE_WIDTH_INNER =
`mx-auto w-full max-w-4xl ${SITE_PAD} min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`;