在響應式網站上使用javascript修改字體大小

Question

我正在用引導程序制作一個響應頁面。 在屏幕中間，我有一個文本：

<p id="entershop" ><a class=no-deco  href="shop.html">enter shop</a></p>

該頁面正在使用引導程序，因此p位於具有特定大小的div內。 我制作了一個腳本，使p越來越大。 p的大小為7rem，使用以下腳本從7變為10：

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";
   // console.log(size.toString() +"rem");
}

if (up == false){
    size-= 0.1;
    text.style.fontSize = size.toString() +"rem";
   // console.log(size.toString() +"rem");
}


}

window.onload = function() {

setInterval(getbiggersmaller,time);
};

在我的16:10顯示器上看起來不錯，但是當我調整窗口大小時，字體變得太大。 我需要一個計算/腳本，使大小增加/減少以及原始字體大小等取決於屏幕大小。 作為一個初學者，我真的不知道從哪里開始：(

Answer 1

我強烈建議您使用媒體查詢而不是JavaScript。 但是，如果您熱衷於使用javascript，我建議您使用單位“像素”而不是“ rem”，因為像素保持恆定並且值不變。 雖然rem根據網站設計而變化，並在計算后轉換為像素，但因情況而異。我也認為您忘了在類名前后加上引號。 媒體查詢是一種用於創建響應式網站的CSS技術。使用媒體查詢，您可以在各種屏幕尺寸上操縱元素的行為。 鏈接到基本媒體查詢教程 ，例如

HTML

<p id="entershop" ><a class="no-deco"  href="shop.html">enter shop</a></p>

CSS：

@media only and screen(min-width:1200px) {
    .a.no-deco {
        font-size:9.5rem;
    }
}
@media only screen and (min-width: 992px) {
    .a.no-deco {
        font-size:8rem;
    }    
}

...等等