diff --git a/src/app/globals.css b/src/app/globals.css index 170c592..4a2b57e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -14,16 +14,36 @@ .container { transform-origin: top left; /* 设置变换原点为左上角 */ } - + @media screen and (min-width: 1440px) and (max-width: 1540px) { + .container { + transform: scale(1.069); /* 1440px宽度的1.333倍是1920px */ + left: calc(50% - 770px); + } + } /* 当屏幕宽度在1440px到1920px之间时 */ - @media screen and (min-width: 1440px) and (max-width: 1920px) { + @media screen and (min-width: 1540px) and (max-width: 1640px) { + .container { + transform: scale(1.138); /* 1440px宽度的1.333倍是1920px */ + left: calc(50% - 820px); + } + } + @media screen and (min-width: 1640px) and (max-width: 1740px) { + .container { + transform: scale(1.208); /* 1440px宽度的1.333倍是1920px */ + left: calc(50% - 870px); + } + } + @media screen and (min-width: 1740px) and (max-width: 1840px) { + .container { + transform: scale(1.277); /* 1440px宽度的1.333倍是1920px */ + left: calc(50% - 920px); + } + } + @media screen and (min-width: 1840px) and (max-width: 1940px) { .container { transform: scale(1.333); /* 1440px宽度的1.333倍是1920px */ left: calc(50% - 960px); } - .mn { - transform: scaleY(1 /1.333) - } } /* 当屏幕宽度大于或等于1920px时 */ @@ -32,7 +52,4 @@ transform: scale(1.333); /* 保持与1920px宽度的屏幕相同的缩放比例 */ left: calc(50% - 960px); } - .mn { - transform: scaleY(1 /1.333) - } } \ No newline at end of file