Question

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

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

（我实际上是使用em而不是px所以小div字体设置为int intId = int.Parse(ID);）

Answer 1

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

$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事件，并提示输入最小字体大小。

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

基本上，我们通过纯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声明添加多个样式。

如何用min创建大字体大小。用户首选项的字体大小

1 个答案: