Reputation: 422
i want to zoom in all the font-size to 200% in my web, here are some test code in fiddle,
if really PX issue, but why here the code are working if i add the style in "<-h2>" ?
<div >
<h2 class="test" style="font-size:300% !important">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello
</h2>
or, there is another question how can i enlarge all the font-size on a same rate?
Upvotes: 0
Views: 138
Reputation: 1526
.test{
font-size:10px;
}
.test2{
font-size:20px;
}
.test3{
font-size:30px;
}
div h2{
zoom:300%!important;
}
<div class="data">
<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>
</div>
you can also use Zoom property like this
.test{
font-size:10px;
}
.test2{
font-size:20px;
}
.test3{
font-size:30px;
}
.data{
zoom:300%!important;
}
<div class="data">
<h2 class="test">
hello
</h2>
<h2 class="test2">
hello
</h2>
<h2 class="test3">
hello</h2>
</div>
Upvotes: 0
Reputation: 2051
Here it is not working because you have used PX
you can use relative units for that
click here for absolute and relative units
Upvotes: 0
Reputation: 5732
Use em and rem.
You can use this 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;
}
Working fiddle: https://jsfiddle.net/eom40w0L/8/
Upvotes: 1