如何在懸停CSS上更改字體大小變量

Question

我是 CSS 變量操作的新手，還沒有找到我面臨的問題的答案。 根據屏幕寬度，我有兩種不同的字體大小。 我想在懸停時動態增加這些變量。 我怎樣才能做到這一點？ 一般有沒有更好的方法？

$my-font-size: 1rem;
h1 {
  font-size: calc($my-font-size * 1.25);
}

@media only screen and (max-width: 595px) {
  h1 {
    font-size: $my-font-size;
  }
}

h1:hover {
  $my-font-size: calc($my-font-size * 1.15);
}

  

Answer 1

只需在媒體查詢之前和內部定義字體大小的變量。 然后使用calc將懸停時的字體大小與變量相乘：

 :root { --font-size: 1.25rem; } @media only screen and (max-width: 595px) { :root { --font-size: 1rem; } } h1 { font-size: var(--font-size); } h1:hover { font-size: calc(var(--font-size) * 1.15); }

 <h1>Just a Test</h1>