javascript - 在响应式网站上使用javascript修改字体大小

Question

我正在使用 Bootstrap 制作一个响应式页面。 在屏幕中间我有一个文本:

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

该页面使用 Bootstrap ，因此 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，我建议您使用单位“pixel”而不是“rem”，因为像素保持不变并且值不会改变。虽然 rem 根据网站设计而变化，并在计算后转换为像素。这可能因情况而异。而且我认为你忘了在类名周围加上引号。 媒体查询是一种用于创建响应式网站的 CSS 技术。使用媒体查询，您可以在各种屏幕尺寸上操纵元素的行为。 link to basic media query tutorial 例如

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;
    }    
}

……等等