在响应式网站上使用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;
    }    
}

...等等