Change Font Sizes Automatically Relative to Root Font Size
To change the fontsize of all elements relative to root font size:
First set root font size with css
html {
font-size: 12px;
}
then set related element sizes with rem size
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1.5rem;
font-weight: bold;
}
h3 {
font-size: 1.5rem;
font-weight: bold;
}
h4 {
font-size: 1rem;
font-weight: bold;
}
then through jquery your can change the root element size:
window.basefont = 12;
function IncreaseFont() {
window.basefont = window.basefont + 1;
$(“html”).css(“font-size”, window.basefont + “px”);
}
function DecreaseFont() {
if (window.basefont == 1) {
return;
}
window.basefont = window.basefont – 1;
$(“html”).css(“font-size”, window.basefont + “px”);
}
