更改字体大小调整和更改文件的高度时，字体大小的更改

问题描述：

var fontSize = $('.basic_unit').css('font-size'); 
 
if (fontSize == '6px') {docHeight=32000;} else if (fontSize == '8px') {docHeight=48000;} else { docHeight = 11000; } 
 

 
var winWidth = $(window).width(); 
 
if (winWidth <= 700){ 
 
\t $('.basic_unit').css.('font-size','2px') 
 
\t } 
 
\t else if (winWidth > 701 && winWidth <= 1200) { 
 
\t \t $('.basic_unit').css.('font-size','6px') 
 
\t \t } 
 
\t else 
 
\t $('.basic_unit').css.('font-size','8px'); 
 
var variableXXX = false; 
 
$(window).scroll(function() { 
 

 
var scrollPercent = 100 * $(window).scrollTop()/docHeight; 
 

 
if (scrollPercent >= 5 && variableXXX == false){ 
 
    variableXXX = true; 
 
     alert($(document).scrollTop()); 
 
    } 
 
});

我需要这个代码在产权工作作为解释：

当窗口宽度是下700级的字体大小是2px。
当窗口宽度在700和1200之间时的字体大小是6px。
当窗口宽度超过1200时，该类的字体大小为8px。

在此之后：

当类的字体大小是2px的docHeight是11000px
当类的字体大小是6像素docHeight是32000px
当类的字体大小是8像素docHeight是48000px

在此之后：

docHeight在滚动功能中起作用。

答

$(window).resize(function(){ 
var winWidth = $(window).width(); 
if (winWidth <= 700){ 
    $('.basic_unit').css('font-size','2px') 
    } 
    else if (winWidth > 701 && winWidth <= 1200) { 
     $('.basic_unit').css('font-size','6px') 
     } 
    else 
    $('.basic_unit').css('font-size','8px'); 

});

但我建议避免Javascript和使用CSS媒体做它：

@media screen and (max-width: 700px) { 
    .basic_unit {font-size:2px} 
} 

@media screen and (min-device-width: 701px) and (max-device-width: 1200px) { 
     .basic_unit {font-size:6px} 
} 

@media only screen and (min-device-width: 1021px) { 
     .basic_unit {font-size:8px} 
}

谢谢，但它无法触发代码的第三部分：var variableXXX = false; $（窗口）.scroll（函数（）{ \t 变种scrollPercent = 100 * $（窗口）.scrollTop（）/ docHeight; \t 如果（scrollPercent> = 5 && variableXXX ==假）{ variableXXX = true; alert（$（document）.scrollTop（））; } }）; –

好吧，它与这部分代码没有任何关系。你必须在其他地方寻找错误。我强烈推荐使用'@media screen' –

答

，如果你对新的浏览器，尝试vw和vh参数：

font-size: 3vw

Documentation W3Schools

更改字体大小调整和更改文件的高度时，字体大小的更改

相关推荐