如何根據字符數和panel-default
大小增長/縮小font-size
?例如,很多字符意味着font-size
會更小,或者更小的屏幕也意味着更小的font-size
。 font-size
應該適合div。如何根據div大小縮放字體大小?
CSS
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0
}
.testing-here {
font-size: 0;
}
.panel-default {
box-sizing: border-box;
border-style: none;
position: relative;
width: 50%;
padding-bottom: 40%;
overflow: hidden;
background-color: #446CB3;
border-radius: 0;
display: inline-block;
margin-bottom: 0px;
border: 2.5px white solid;
}
.panel-body {
color: white;
text-align: center;
position:absolute;
font-size: 16px;
}
HTML
<div class="testing-here">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
有沒有辦法做到這一點沒有JavaScript的?
沒有@ParthBhoiwala我認爲是有辦法做到這一點沒有的JavaScript。 –