diff --git a/components/layout/site-width.ts b/components/layout/site-width.ts index 0014612..eabb647 100644 --- a/components/layout/site-width.ts +++ b/components/layout/site-width.ts @@ -1,18 +1,18 @@ /** * 响应式内容宽度(类名须完整书写,供 Tailwind 扫描) - * - ≤1920px(1080p):约 896px - * - 1921px+(超宽入门):约 1152px - * - 2560px+(带鱼屏):约 1280px - * - 3440px+(超宽带鱼):约 1440px + * - 手机 / 平板竖屏(<1024):随屏宽,上限约 896px + * - 平板横屏(1024–1919):约 1152px,比 1080p 桌面更宽 + * - 1080p 桌面(1920):约 896px(不变) + * - 1921px+ / 2560px+ / 3440px+:带鱼屏阶梯加宽 */ 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]`; + `w-full max-w-4xl ${SITE_PAD} min-[1024px]:max-w-6xl min-[1920px]:max-w-4xl 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`; + `w-full max-w-3xl ${SITE_PAD} min-[1024px]:max-w-5xl min-[1920px]:max-w-3xl 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]`; + `mx-auto w-full max-w-4xl ${SITE_PAD} min-[1024px]:max-w-6xl min-[1920px]:max-w-4xl min-[1921px]:max-w-6xl min-[2560px]:max-w-7xl min-[3440px]:max-w-[1440px]`; diff --git a/tailwind.config.ts b/tailwind.config.ts index 638fad4..578aff6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,6 +13,10 @@ module.exports = { "max-w-6xl", "max-w-7xl", "max-w-[1440px]", + "min-[1024px]:max-w-5xl", + "min-[1024px]:max-w-6xl", + "min-[1920px]:max-w-3xl", + "min-[1920px]:max-w-4xl", "min-[1921px]:max-w-4xl", "min-[1921px]:max-w-5xl", "min-[1921px]:max-w-6xl",