Currently, I am designing a responsive webpage utilizing Bootstrap framework. Situated in the center of the screen is a text that reads:
<p id="entershop" ><a class=no-deco href="shop.html">enter shop</a></p>
Within the Bootstrap layout, the paragraph (p) element is enclosed within a div of a specific size. I have implemented a script that enacts an effect where the text within the paragraph grows and shrinks dynamically. The paragraph has a font size of 7rem and transitions from 7 to 10 through the following script:
var time = 100;
var up = true;
var size = 7.0;
var getbiggersmaller = function () {
var text = document.getElementById("entershop");
if (size > 9.5){
up = false;
}
if (size< 7){
up = true;
}
if (up){
size+= 0.1;
text.style.fontSize = size.toString() +"rem";
}
if (up == false){
size-= 0.1;
text.style.fontSize = size.toString() +"rem";
}
}
window.onload = function() {
setInterval(getbiggersmaller,time);
};
While it appears satisfactory on my 16:10 monitor, resizing the window results in the font size becoming excessively large. I am in need of a calculation or script that adjusts the increment/decrement amount of the font size and its original value based on the screen size. As a beginner, I am unsure of how to proceed with this. Any guidance or assistance would be greatly appreciated.