Автоматическая настройка размера шрифта при изменении размера

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

Если вы не хотите использовать медиа-запросы и иметь такой эффект 'резки', вы всегда можете использовать 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 2

Вы можете использовать CSS @media и применить к элементу, класс или идентификатор В образце используется идентификатор

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

#your_id{font-size: 18px;} 

} 

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

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

Answer 3

Автоматическая настройка размера шрифта при изменении размера

Вы можете использовать vw единиц, чтобы сделать это:

h2 {font-size: 8vw;} 

See this example

Совместимость:http://caniuse.com/#search=vw

Answer 4

Вы можете использовать событие 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 5

JS Проект, который поможет вы узнаете, как работают tweeks. Вы можете изменить его очень легко

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

Из кода

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

Изменение значения «5», как вы хотите, чтобы получить соотношение FontSize в зависимости от размера вид/экрана.