Css -动态字体大小
Css -动态字体大小
提问于 2014-06-18 13:30:20
我们正在为一个学校项目开发一个网站:这个网站也必须可以在移动设备(和平板电脑)上使用。
我们已经达到了这个目标，除了字体大小的一个问题:我们已经通过@media query手动设置了这个属性。
有没有一种方法可以使字体大小在不使用百分比的情况下成为动态的？
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-06-18 13:40:51
如果我理解你的问题，你应该考虑这样的选择：
.yourClass {
font-size: 2.0vw;
}它意味着视口宽度的2.0%。您还可以使用2.0vh (2.0%视口高度)
Stack Overflow用户
发布于 2014-06-18 13:43:19
我不知道其他人对这个解决方案会有什么看法(因为有些人会认为它是不必要的脚本)，但它对我来说真的很好。我使用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);
}Stack Overflow用户
发布于 2014-06-18 13:45:27
如果您想用一些javascript来搅乱水域，您可以按照以下内容进行：
$(function(){
resizeFont();
$(window).resize(function(){
resizeFont();
});
function resizeFont(){
var windowWidth = $(window).width(),
psize = windowWidth/ 10;
$("p").css("font-size",psize);
}
});不过，你需要一点数学才能正确地解决这个问题。
http://jsfiddle.net/wildandjam/5Hnxa/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24286905
复制相关文章
相似问题
腾讯云开发者
