睿思设计_软件开发专业名词_seo是什么东西_王通seo教程

记录，以防忘记

Sass 函数定义 (_units.scss)

// 设计稿基准尺寸（根据实际设计图修改）
$design-viewport-width: 1920px;  // 设计稿宽度
$design-viewport-height: 1080px; // 设计稿高度// 计算公式   传入px值 / 设计稿宽度 * 100vw或100vh// 适老化模式字体增量（可配置）
$accessibility-font-offset: 3px;// 核心转换函数
@function px-to-vw($px) {
// 如果不加 # 就出现 单位丢失 如 calc(16 / 1920 * 100vw)（单位丢失，无法正确计算）
// var(--accessibility-font-offset, 0px)  如果变量未定义，则使用0px@return calc((#{$px} + var(--accessibility-font-offset, 0px)) / #{$design-viewport-width} * 100vw);
}@function px-to-vh($px) {@return calc((#{$px} + var(--accessibility-font-offset, 0px)) / #{$design-viewport-height} * 100vh);
}// 适配混合器（可选）
@mixin accessibility-mode {--accessibility-font-offset: #{$accessibility-font-offset};
}

CSS 变量声明 (styles.scss)

:root {// 初始化适老化偏移量（默认不启用）--accessibility-font-offset: 0px;
}body {// 使用示例：将 16px 转换为 vw 单位（自动包含适老化增量）font-size: px-to-vw(16px);// 高度转换示例（如需要）padding-top: px-to-vh(20px);
}// 适老化模式专用类
.accessibility-mode {@include accessibility-mode;
}

适老化切换

function toggleAccessibilityMode(enable) {const root = document.documentElement;if (enable) {root.classList.add('accessibility-mode');// 可选：存储用户偏好localStorage.setItem('accessibilityMode', 'enabled');} else {root.classList.remove('accessibility-mode');localStorage.setItem('accessibilityMode', 'disabled');}
}// 初始化检测用户设置
window.addEventListener('DOMContentLoaded', () => {const savedMode = localStorage.getItem('accessibilityMode');if (savedMode === 'enabled') toggleAccessibilityMode(true);
});<button onclick="toggleAccessibilityMode(true)">开启适老化模式</button>
<button onclick="toggleAccessibilityMode(false)">关闭适老化模式</button>