Question

我想在我的网络中将所有字体大小放大到200％，here are some test code in fiddle，

如果确实是PX问题，但为什么在这里代码正常工作如果我在＆＃34;＆lt; -h2＆gt;＆＃34;中添加样式？

<div  >
<h2 class="test" style="font-size:300% !important">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello
</h2>

或者，还有另一个问题，如何以相同的速率放大所有字体大小？

Answer 1

使用em和rem。

您可以使用此http://pxtoem.com/

HTML

<div style="font-size:2rem !important" >
    <h2 class="test">
    hello
    </h2>
    <h2 class="test2">
    hello
    </h2>
    <h2 class="test3">
    hello
    </h2>
</div>

CSS

.test{
  font-size:1em;
}
.test2{
  font-size:2em;
}
.test3{
  font-size:3em;
}

工作小提琴：https://jsfiddle.net/eom40w0L/8/

Answer 2

由于您使用过PX

，因此无效

你可以使用相对单位

click here for absolute and relative units

Answer 3

＆＃13;

.test{
  font-size:10px;
}
.test2{
  font-size:20px;
}
.test3{
  font-size:30px;
}

div h2{
  zoom:300%!important;
}

＆＃13;

<div class="data">


<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>

</div>

＆＃13;

你也可以像这样使用Zoom属性

＆＃13;

.test{
  font-size:10px;
}
.test2{
  font-size:20px;
}
.test3{
  font-size:30px;
}

.data{
  zoom:300%!important;
}

＆＃13;

<div class="data">


<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>

</div>

＆＃13;

为什么！重要的不在css中工作？

3 个答案: