修改字体大小与自适应网站的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的变化，它被转换为像素后calculation.Which可能会有所不同情况situation.Also我想你忘了周围的类名引号。媒体查询是用于创建响应websites.Using媒体查询你可以操纵各种屏幕尺寸的元素的行为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;
    }    
}

...等等