28 lines
724 B
Plaintext
28 lines
724 B
Plaintext
|
// 屏幕适配工具 (Less 版本)
|
|||
|
|
// 设计稿基准：1920px (宽) × 982px (高，不含头部)
|
|||
|
|
|
|||
|
|
// 设计稿基准值
|
|||
|
|
@design-width: 1920;
|
|||
|
|
@design-height: 982;
|
|||
|
|
|
|||
|
|
// 将 px 转换为 vw (基于设计稿宽度 1920px)
|
|||
|
|
.vw(@px) {
|
|||
|
|
@vw-value: (@px / @design-width * 100vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将 px 转换为 vh (基于设计稿内容区域高度 982px)
|
|||
|
|
.vh(@px) {
|
|||
|
|
@vh-value: (@px / @design-height * 100vh);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 字体大小转换 (使用 vw 确保响应式)
|
|||
|
|
.fs(@px) {
|
|||
|
|
@fs-value: (@px / @design-width * 100vw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 由于 Less 的限制，直接使用 calc() 表达式更简单
|
|||
|
|
// 使用示例（推荐方式）：
|
|||
|
|
// width: calc(580 / 1920 * 100vw);
|
|||
|
|
// height: calc(400 / 982 * 100vh);
|
|||
|
|
// font-size: calc(16 / 1920 * 100vw);
|