我只想问一下调整大小时我如何能够使字体大小做出响应(例如没有剪切的缩放效果)?我有bootstrap.css,jquery.js和bootstrap.js
<div class="full-width1">
<div class="container">
<h1 class="firstinfo">About SWA{PRO}SE</h1>
<p class="desc">The Software and Web Application Professionals and System Engineers (SWAPROSE) is a team of IT experts with vast experience in intranet business software, web application and game development.</p>
</div>
</div>
<div class="full-width2">
<div class="arrow-white"></div>
<div class="container">
<h1 style="color:#1798AA; font-weight:bold">Project Development</h1>
<p class="desc">Swaprose provides a variety of project developments, from games to software. we create the applications need for our clients. We also create independent mobile games to be released on Android and iOS.</p>
</div>
</div>
</div>
最佳答案
如果您不想使用媒体查询并具有“剪切”效果,则可以始终使用jQuery。我很快就这样写:
// Resize text
function resize_text(){
// Var
f = $(window).width()/50;
min = 12;
if(f > min){
$('p').css('font-size',f + 'px');
} else {
$('p').css('font-size',min + 'px');
}
}
// Fire on resize
$(window).resize(function(){
resize_text();
})
// Init
resize_text();
最小值是文本将要到达的最小值(否则它将不可读)
这里的工作示例
http://codepen.io/jcoulterdesign/pen/d54fc17bad1d651ab174b5708b16fb3c