Solo quiero preguntar ¿cómo puedo hacer que el tamaño de fuente cambie de manera receptiva (como un efecto de zoom sin cortes) al cambiar el tamaño? Tengo bootstrap.css, jquery.js y 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>

enter image description here

1
RagnaLugria 10 may. 2016 a las 20:56

5 respuestas

La mejor respuesta

Si no desea usar consultas de medios y tener ese efecto de 'corte', siempre puede usar jQuery. Simplemente escribí esto rápidamente:

// 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 es el más pequeño que irá el texto (de lo contrario será ilegible)

Ejemplo de trabajo aquí

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

0
Jamie Buttons Coulter 10 may. 2016 a las 18:09

Puede usar el evento JQuery .resize() y la propiedad css transition-duration

Necesita agregar un oyente de cambio de tamaño, se vería algo así como: `

$(".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;
}
0
bakz 10 may. 2016 a las 18:08

Un proyecto JS que lo ayudará a aprender cómo funcionan los tweeks. Puedes modificarlo muy fácilmente

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

Del código

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

Cambie el valor '5' como desee para obtener la proporción de tamaño de fuente de acuerdo con el tamaño de la vista / pantalla.

0
Shuvo Habib 10 may. 2016 a las 20:36

Puede usar css @media y aplicarlo a elemento, clase o id. En la muestra se usa un id.

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

#your_id{font-size: 18px;}

}

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

#your_id{font-size: 16px;}
}
0
scaisEdge 10 may. 2016 a las 18:04

Ajuste automático del tamaño de fuente al cambiar el tamaño

Puede usar unidades vw para hacer eso:

h2 {font-size: 8vw;}

Mira este ejemplo

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

1
Vincent G 10 may. 2016 a las 18:06