Merge branch 'main' of http://10.1.1.5:8418/acdiu/AcdiuTools
This commit is contained in:
@@ -6,4 +6,12 @@
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<Content Remove="compilerconfig.json" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<None Include="compilerconfig.json" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/AcdiuTools.styles.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/ac/ac.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/ac/ac.min.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="~/ac/icon/all.css" asp-append-version="true" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
6
compilerconfig.json
Normal file
6
compilerconfig.json
Normal file
@@ -0,0 +1,6 @@
|
||||
[
|
||||
{
|
||||
"outputFile": "wwwroot/ac/ac.css",
|
||||
"inputFile": "wwwroot/ac/ac.scss"
|
||||
}
|
||||
]
|
||||
59
compilerconfig.json.defaults
Normal file
59
compilerconfig.json.defaults
Normal file
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"compilers": {
|
||||
"less": {
|
||||
"autoPrefix": "",
|
||||
"cssComb": "none",
|
||||
"ieCompat": true,
|
||||
"math": null,
|
||||
"strictMath": false,
|
||||
"strictUnits": false,
|
||||
"relativeUrls": true,
|
||||
"rootPath": "",
|
||||
"sourceMapRoot": "",
|
||||
"sourceMapBasePath": "",
|
||||
"sourceMap": false
|
||||
},
|
||||
"sass": {
|
||||
"autoPrefix": "",
|
||||
"loadPaths": "",
|
||||
"style": "expanded",
|
||||
"relativeUrls": true,
|
||||
"sourceMap": false
|
||||
},
|
||||
"stylus": {
|
||||
"sourceMap": false
|
||||
},
|
||||
"babel": {
|
||||
"sourceMap": false
|
||||
},
|
||||
"coffeescript": {
|
||||
"bare": false,
|
||||
"runtimeMode": "node",
|
||||
"sourceMap": false
|
||||
},
|
||||
"handlebars": {
|
||||
"root": "",
|
||||
"noBOM": false,
|
||||
"name": "",
|
||||
"namespace": "",
|
||||
"knownHelpersOnly": false,
|
||||
"forcePartial": false,
|
||||
"knownHelpers": [],
|
||||
"commonjs": "",
|
||||
"amd": false,
|
||||
"sourceMap": false
|
||||
}
|
||||
},
|
||||
"minifiers": {
|
||||
"css": {
|
||||
"enabled": true,
|
||||
"termSemicolons": true,
|
||||
"gzip": false
|
||||
},
|
||||
"javascript": {
|
||||
"enabled": true,
|
||||
"termSemicolons": true,
|
||||
"gzip": false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,63 +1,58 @@
|
||||
:root {
|
||||
/* --- 基础断点定义 (供参考) --- */
|
||||
/* 手机: < 768px */
|
||||
/* 平板: 768px - 1024px */
|
||||
/* 桌面: 1024px - 1920px */
|
||||
/* 4K屏: 3840px */
|
||||
/* --- 核心字号缩放逻辑 --- */
|
||||
/* 逻辑: 在移动端最小为 14px，在 1024px 以上开始线性增长，到 4K 达到 24px */
|
||||
/* 公式: clamp(最小值, 首选值, 最大值) */
|
||||
@charset "UTF-8";
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
:root {
|
||||
/* 1.2vw + 10px 是一个经过计算的动态值，确保 1024-3840 之间平滑过渡 */
|
||||
font-size: clamp(16px, 0.35vw + 12.4px, 24px);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 3840px) {
|
||||
:root {
|
||||
/* 针对 4K 以上屏幕，如果想继续缩放可保持 clamp，想锁定则固定 24px */
|
||||
font-size: 24px;
|
||||
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
|
||||
公式：(24 / 3840) * 100vw = 0.625vw
|
||||
*/
|
||||
font-size: 0.625vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 全局布局容器 --- */
|
||||
/* --- 全局布局容器适配 --- */
|
||||
.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;
|
||||
max-width: 93.75vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* 为当前激活的 nav-link，增加加粗效果 */
|
||||
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
|
||||
.w-1r {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.h-1r {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
font-weight: bold;
|
||||
color: var(--bs-primary) !important;
|
||||
@@ -69,10 +64,6 @@
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.w-1r {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.h-1r {
|
||||
height: 1rem;
|
||||
mg-0 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
78
wwwroot/ac/ac.css.bak
Normal file
78
wwwroot/ac/ac.css.bak
Normal file
@@ -0,0 +1,78 @@
|
||||
: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;
|
||||
}
|
||||
1
wwwroot/ac/ac.min.css
vendored
Normal file
1
wwwroot/ac/ac.min.css
vendored
Normal file
@@ -0,0 +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;}
|
||||
103
wwwroot/ac/ac.scss
Normal file
103
wwwroot/ac/ac.scss
Normal file
@@ -0,0 +1,103 @@
|
||||
// ========================================================
|
||||
// 1. 变量与断点定义 (集中管理)
|
||||
// ========================================================
|
||||
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '4k': 3840px );
|
||||
|
||||
// 字号常量
|
||||
$font-size-small: 14px; // 手机/平板基准
|
||||
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
|
||||
$font-size-4k-base: 24px; // 4K 触发点字号
|
||||
|
||||
// 容器配置
|
||||
$container-paddings: 1rem;
|
||||
|
||||
// ========================================================
|
||||
// 2. 媒体查询 Mixin
|
||||
// ========================================================
|
||||
@mixin respond-to($breakpoint) {
|
||||
// 如果是预定义的 key (如 'mobile')
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
// 如果是传入的具体数值 (如 3840px)
|
||||
@else {
|
||||
@media (min-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// 3. 核心响应式逻辑
|
||||
// ========================================================
|
||||
:root {
|
||||
// --- [阶段 A] 默认状态 (手机/小屏幕) ---
|
||||
font-size: $font-size-small;
|
||||
// --- [阶段 B] 1024px 以上到 4K 之前：保持标准 16px ---
|
||||
@include respond-to('tablet') {
|
||||
font-size: $font-size-standard;
|
||||
}
|
||||
// --- [阶段 C] 大于 4K：开启线性增长 ---
|
||||
@include respond-to('4k') {
|
||||
/* 逻辑：从 3840px 开始，字号从 24px 线性向上。
|
||||
公式：(24 / 3840) * 100vw = 0.625vw
|
||||
*/
|
||||
font-size: 0.625vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- 全局布局容器适配 --- */
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 $container-paddings;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
@include respond-to('tablet') {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
@include respond-to('desktop') {
|
||||
max-width: 1800px;
|
||||
}
|
||||
// 4K 以上容器随之线性扩大
|
||||
@include respond-to('4k') {
|
||||
// 保持容器宽度占比：(3600 / 3840) * 100vw = 93.75vw
|
||||
max-width: 93.75vw;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// 4. 工具类与组件样式
|
||||
// ========================================================
|
||||
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
|
||||
.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,2 +0,0 @@
|
||||
body {
|
||||
}
|
||||
Reference in New Issue
Block a user