更改字體大小調整和更改文件的高度時，字體大小的更改

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在滾動功能中起作用。

來源

2016-03-27 Ivan Soler

$(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} 
}

來源

2016-03-27 22:08:57

謝謝，但它無法觸發代碼的第三部分：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

來源

2016-03-27 22:22:54 Patron

更改字體大小調整和更改文件的高度時，字體大小的更改

回答

相關問題