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

Question

i just want to ask how am i able to make the font size change responsively (like a zoom effect no cuts) when resizing? I got bootstrap.css, jquery.js and 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

Auto adjust font size when resizing

You can use vw units to do that :

h2 {font-size: 8vw;}

See this example

Compatibility : http://caniuse.com/#search=vw

Answer 2

You can use css @media and apply to element, class or id In the sample is used an 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

You could use the JQuery event .resize() and the css property transition-duration

you need to add a re-size listener, would look something like: `

$(".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

If you don't want to use media queries and have that 'cutting' effect, you could always use jQuery. I just quickly wrote this:

// 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();

Min being the smallest the text will go (otherwise it will be unreadable)

Working example here

http://codepen.io/jcoulterdesign/pen/d54fc17bad1d651ab174b5708b16fb3c

Answer 5

A JS Project that will help you learn how the tweeks work. You can modify it very easily

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

From the code

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

Change the value '5' as you wish to get the ratio of fontsize according to view/screen size.