我们正在开发一个学校项目的网站,这个网站必须可以在移动设备(和平板电脑)上使用。我们已经实现了这个目标,但是存在一个问题:字体大小使用@media查询手动设置属性。是否有一种方法可以使字体大小具有动态性而不使用百分比?谢谢。
如果我理解您的问题,您应该考虑这个选项:
.yourClass {
font-size: 2.0vw;
}
这意味着它占 视窗 宽度的2.0%。您也可以使用2.0vh(2.0%视窗高度)。
我不确定其他人对这个解决方案的感觉(因为有些人会认为它是不必要的脚本),但对我来说效果非常好。我使用jQuery将字体大小设置为屏幕大小的百分比。
var FONT_SCALE = 0.027;
function initFontSizes() {
$(".text-element").css("font-size", $(window).height() * FONT_SCALE);
}
如果你想的话,你可以将它添加为一个jQuery函数,这样你就可以在任何对象上调用它:
jQuery.fn.setFontSize(scale) {
$(this).css("font-size", $(window).height() * scale);
}
$(function(){
resizeFont();
$(window).resize(function(){
resizeFont();
});
function resizeFont(){
var windowWidth = $(window).width(),
psize = windowWidth/ 10;
$("p").css("font-size",psize);
}
});
不过,你需要一些数学知识才能正确地解决它。