我只想问一下调整大小时我如何能够使字体大小做出响应(例如没有剪切的缩放效果)?我有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>


javascript - 调整大小时自动调整字体大小-LMLPHP

最佳答案

如果您不想使用媒体查询并具有“剪切”效果,则可以始终使用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

10-05 21:05
查看更多