使用sass 实现px转vh或vw,适配适老化时,在设计图字体大小的基础上,增加3px(可配置),

记录,以防忘记

Sass 函数定义 (_units.scss)
css 复制代码
// 设计稿基准尺寸(根据实际设计图修改)
$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)
css 复制代码
: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;
}

适老化切换

javascript 复制代码
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>
相关推荐
言不由衷煦11 分钟前
Centos7.x内网环境Jenkins前端打包环境配置
运维·前端·jenkins
Adolf_199321 分钟前
JavaScript中的命名导出(暴露)
前端·javascript·react.js
kooboo china.42 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(五):语音合成输出与交互增强
css·人工智能·交互
招风的黑耳1 小时前
Spring Web高保真Axure动态交互元件库
前端·spring·axure
橙色小博1 小时前
Python中openpyxl库的基础解析与代码实例
前端·python·excel·openpyxl
xcLeigh1 小时前
HTML5实现简洁的端午节节日网站源码
前端·html5·节日·端午节
大数据魔法师4 小时前
Bootstrap项目 - 个人作品与成就展示网站
前端·bootstrap·html
LaughingZhu7 小时前
PH热榜 | 2025-05-29
前端·人工智能·经验分享·搜索引擎·产品运营
汪子熙9 小时前
Angular i18n 资源加载利器解析: i18n-http-backend
前端·javascript·面试
天天扭码9 小时前
在React项目中实现富文本编辑文章并发布
前端·react.js·github