适老化技术

简介

利用css变量实现按钮点击排版样式转换成老年人看得见的样式。

适用范围

用于手机h5页面，目前验证的主流浏览器（Google，edge）都可以适配

受众对象

老年人和一些弱视的人

需要文件

less后缀的css样式文件，含有dom节点的展示文件

最终效果

图1

图2

关键代码

配置css全局变量

/* 定义适老化样式的CSS变量 */
:root {
  --font-size: 12px;
  --background-color: #FEDFE1;
  --text-color: #000000;
  --button-padding: 10px 20px;
  --button-border: 2px solid #000000;
  --button-background: #ffffff;
  --button-hover-background: #eeeeee;
}

样式部分利用css变量

/* 使用CSS变量来设置样式 */
.box {
  font-size: var(--font-size);
  background-color: var(--background-color);
  color: var(--text-color);
}

button {
  padding: var(--button-padding);
  border: var(--button-border);
  background-color: var(--button-background);
}

button:hover, button:focus {
  background-color: var(--button-hover-background);
  outline: none;
}

dom利用css

<div className={styles["box"]}>
      <h1>适老化页面示例</h1>

      <button onClick={change}>点击我进行适老化</button>

      <p>这是一个适合老年人的H5页面示例。</p>
      <Content />
</div>

触发事件

  const [isOld, setIsOld] = useState(true);
  const change = () => {
    let autoOld = document.documentElement.style;
    if (isOld) {
      autoOld.setProperty(`--font-size`, "20px");
      autoOld.setProperty(`--background-color`, "#fffff");
      autoOld.setProperty(`--text-color`, "#000000");
      autoOld.setProperty(`--button-padding`, "10px 20px");
      autoOld.setProperty(`--button-border`, "#ffffff");
      autoOld.setProperty(`--button-hover-background`, "#eeeeee");
    } else {
      autoOld.setProperty(`--font-size`, "12px");
      autoOld.setProperty(`--background-color`, "#FEDFE1");
    }
    setIsOld(!isOld);
  };

常见问题解答