javascript - 在窗口宽度调整大小时更改字体大小，并在字体大小更改时更改文档高度

Question

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){
	$('.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'); 
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
• 当类的字体大小为6px时，docHeight为32000px
• 当类的字体大小为8px时，docHeight为48000px

在此之后:

• docHeight 作用于滚动功能。

Answer 1

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