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 作用于滚动功能。
最佳答案
$(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}
}
关于javascript - 在窗口宽度调整大小时更改字体大小,并在字体大小更改时更改文档高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36253229/