Question

＆＃13;

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

＆＃13;

我需要使用此代码，如标题中所述：

当窗口宽度小于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'); 

});

但我建议使用css media避免使用Javascript：

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

Answer 2

如果您使用的是较新的浏览器，请尝试vw和vh参数：

font-size: 3vw

Documentation W3Schools

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

2 个答案: