Question

我只是想问一下，在调整大小时，我是如何能够响应性地改变字体大小的（如缩放效果，没有剪切）？我得到了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>

Answer 1

调整大小时自动调整字体大小

您可以使用vw个单位来执行此操作：

h2 {font-size: 8vw;}

See this example

兼容性： http://caniuse.com/#search=vw

Answer 2

您可以使用css @media并应用于元素，类或ID 在样本中使用了id

@media all and (max-width: 1200px) {

#your_id{font-size: 18px;}

}

@media all and (max-width: 700px) {

#your_id{font-size: 16px;}
}

Answer 3

您可以使用JQuery事件.resize()和css属性transition-duration

你需要添加一个重新调整大小的侦听器，看起来像这样： `

$(".container").resize( function(){
  $(".container").css("font-size","24px");
  //can be an algorithim like:
  // var size $(".container").width() / 4;
  //$(".container").css("font-size",size+"px");
});

CSS：

.container
{
     font-size:16px
     transition-duration: 0.4s;
     -ms-transition-duration:  0.4s;
     -moz-transition-duration:  0.4s;
     -webkit-transition-duration:  0.4s;
}

Answer 4

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

Answer 5

一个JS项目，可以帮助您了解tweek的工作原理。你可以很容易地修改它

http://codepen.io/ShuvoHabib/pen/gPzdzO

来自代码

function doResize() {
  resize(document.getElementById('text'), 5);
}

更改值＆＃39; 5＆＃39;因为你希望根据视图/屏幕尺寸获得fontsize的比率。

调整大小时自动调整字体大小

5 个答案: