如何使大字体大小缩放与分钟。来自用户偏好的字体大小

Question

我有一个字体大小为12 的 div，另一个 div 为24。

当用户有让我们说一分钟。 font-size 设置为16px，如何使用16 的新font-size 和24 比例（x2）制作div？

（我实际上使用的是 em 而不是 px，所以小 div 字体设置为.75em）

Answer 1

也许最简单的解决方案涉及SASS，您可以在其中存储字体大小的变量。这是一个例子

$fontSize: 14px;

然后您可以在您的 css 中引用该值

div1 {
  font-size: $fontSize;
}

您还可以使用 SASS 变量执行算术运算。

div2 {
  font-size: $fontSize * 2;
}

如果你想改变字体大小，你可以简单地改变$fontSize变量的值，它会在两个选择中更新。

也可以通过原生 JavaScript 做到这一点。

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var button = document.getElementById("my-button");
    
button.addEventListener("click", function() {
    var minFontSize = Number(prompt("Please enter your minimum font-size"));
    div1.style.fontSize = minFontSize + "px";
    div2.style.fontSize = (minFontSize * 2) + "px";
    div1.style.display = "block";
    div2.style.display = "block";
});

div {
  display: none;
}

<div id="div1">This is the first div</div>
<div id="div2">This is the second div</div>

<button id="my-button">Change Font Size</button>

故障

首先创建变量来引用您的两个 div 和一个按钮。这些将首先被赋予一个隐藏值。

然后我们将监听click 事件，并提示输入最小字体大小。

我们现在可以使用object.style.rule 语法设置font-size 和display 属性。

基本上，我们通过纯 JavaScript 来缩放字体大小。

jQuery 也可以做到这一点。

$(document).ready(function() {
  $("#my-button").on("click", function() {
      var minFontSize = prompt("Please enter a minimum font size");
      $("#div1").css({"display": "block", "font-size": minFontSize + "px"});
      $("#div2").css({"display": "block", "font-size": (minFontSize * 2) + "px"});
  });
});

div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">This is the first div</div>
<div id="div2">
This is the second div
</div>

<button id="my-button">
Change Font Size
</button>

使用 jQuery 实际上更容易，因为您可以通过一个 css 声明添加多种样式。