编码初学者。尝试使用 % 作为字体大小，但是当我尝试时，无论我使用什么数字 %，它看起来都是这样:http://imgur.com/PLAzOW2
当前代码: 示例
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style>
.container
{
position: relative;
vertical-align:middle;
margin: auto;
}
#random_text
{font-size:40px;
text-align:center;vertical-align:middle;
text-align:-moz-center;
text-align:-webkit-center;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).resize(function() {
var windowHeight = $(window).height();
var containerHeight = $(".container").height();
$(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
});
var textarray = [
"\"Example\"",
];
var firstTime = true;
function RndText()
{
var rannum = Math.floor(Math.random() * textarray.length);
if(firstTime) {
$('#random_text').fadeIn('fast', function() {
$(this).text(textarray[rannum]).fadeOut('fast');
});
firstTime = false;
}
$('#random_text').fadeOut('fast', function() {
$(this).text(textarray[rannum]).fadeIn('fast');
});
var windowHeight = $(window).height();
var containerHeight = $(".container").height();
$(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
}
$(function() {
// Call the random function when the DOM is ready:
RndText();
});
var inter = setInterval(function() { RndText(); }, 3000);
});//]]>
</script>
</head>
<body><div class="container">
<div id="random_text"></div>
</div>
</body>
</html>
有人知道为什么会这样吗？有谁知道解决问题的方法吗？
谢谢
最佳答案
检查这个JS Fiddle ，如果您试图使字体大小“响应式”，随着它在大屏幕上变大而在小屏幕上缩小，您需要使用 View 单位宽度为 vw，高度为 vh
#random_text {
font-size:4vw; /* font size is 4% of the full width of the view */
您不能使用百分比 % 来实现此目的，因为 font-size:40% 表示默认字体大小的 40%，不是 View 的 40%。
关于css - 使用 %? 时字体大小不受影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33884930/