Merge branch 'main' of http://10.1.1.5:8418/acdiu/AcdiuTools
This commit is contained in:
@@ -38,6 +38,16 @@
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 2560px) {
|
||||
.container {
|
||||
max-width: 2560px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3800px) {
|
||||
.container {
|
||||
max-width: 3800px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 3840px) {
|
||||
.container {
|
||||
max-width: 93.75vw;
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
:root {
|
||||
/* --- 基础断点定义 (供参考) --- */
|
||||
/* 手机: < 768px */
|
||||
/* 平板: 768px - 1024px */
|
||||
/* 桌面: 1024px - 1920px */
|
||||
/* 4K屏: 3840px */
|
||||
/* --- 核心字号缩放逻辑 --- */
|
||||
/* 逻辑: 在移动端最小为 14px,在 1024px 以上开始线性增长,到 4K 达到 24px */
|
||||
/* 公式: clamp(最小值, 首选值, 最大值) */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
/* 1.2vw + 10px 是一个经过计算的动态值,确保 1024-3840 之间平滑过渡 */
|
||||
font-size: clamp(16px, 0.35vw + 12.4px, 24px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 3840px) {
|
||||
:root {
|
||||
/* 针对 4K 以上屏幕,如果想继续缩放可保持 clamp,想锁定则固定 24px */
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 全局布局容器 --- */
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
/* 这里的 1rem 会随着上面定义的 font-size 自动缩放 */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
.container {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 3840px) {
|
||||
.container {
|
||||
max-width: 3600px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 为当前激活的 nav-link,增加加粗效果 */
|
||||
.nav-link.active {
|
||||
font-weight: bold;
|
||||
color: var(--bs-primary) !important;
|
||||
border-bottom: 2px solid var(--bs-primary);
|
||||
}
|
||||
|
||||
.p-r-t {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.w-1r {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.h-1r {
|
||||
height: 1rem;
|
||||
}
|
||||
2
wwwroot/ac/ac.min.css
vendored
2
wwwroot/ac/ac.min.css
vendored
@@ -1 +1 @@
|
||||
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:.625vw;}}.container{width:100%;margin:0 auto;padding:0 1rem;box-sizing:border-box;}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:1024px){.container{max-width:960px;}}@media(min-width:1920px){.container{max-width:1800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.w-1r{width:1rem;}.h-1r{height:1rem;}.nav-link.active{font-weight:bold;color:var(--bs-primary)!important;border-bottom:2px solid var(--bs-primary);}.p-r-t{position:relative;top:-1px;}mg-0{margin:0 auto;}
|
||||
@charset "UTF-8";:root{font-size:14px;}@media(min-width:1024px){:root{font-size:16px;}}@media(min-width:3840px){:root{font-size:.625vw;}}.container{width:100%;margin:0 auto;padding:0 1rem;box-sizing:border-box;}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:1024px){.container{max-width:960px;}}@media(min-width:1920px){.container{max-width:1800px;}}@media(min-width:2560px){.container{max-width:2560px;}}@media(min-width:3800px){.container{max-width:3800px;}}@media(min-width:3840px){.container{max-width:93.75vw;}}.w-1r{width:1rem;}.h-1r{height:1rem;}.nav-link.active{font-weight:bold;color:var(--bs-primary)!important;border-bottom:2px solid var(--bs-primary);}.p-r-t{position:relative;top:-1px;}mg-0{margin:0 auto;}
|
||||
@@ -1,7 +1,7 @@
|
||||
// ========================================================
|
||||
// 1. 变量与断点定义 (集中管理)
|
||||
// ========================================================
|
||||
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '4k': 3840px );
|
||||
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560px, '4k-40': 3800px, '4k': 3840px );
|
||||
|
||||
// 字号常量
|
||||
$font-size-small: 14px; // 手机/平板基准
|
||||
@@ -49,6 +49,7 @@ $container-paddings: 1rem;
|
||||
}
|
||||
|
||||
/* --- 全局布局容器适配 --- */
|
||||
// 其中 4k-40 为准 4K, 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
@@ -66,7 +67,15 @@ $container-paddings: 1rem;
|
||||
@include respond-to('desktop') {
|
||||
max-width: 1800px;
|
||||
}
|
||||
// 4K 以上容器随之线性扩大
|
||||
|
||||
@include respond-to('2k') {
|
||||
max-width: 2560px;
|
||||
}
|
||||
|
||||
@include respond-to('4k-40') {
|
||||
max-width: 3800px;
|
||||
}
|
||||
// 当容器等于 4K 时,随之线性扩大
|
||||
@include respond-to('4k') {
|
||||
// 保持容器宽度占比:(3600 / 3840) * 100vw = 93.75vw
|
||||
max-width: 93.75vw;
|
||||
|
||||
Reference in New Issue
Block a user