Responsive & texto flexible con FluidFont. js

Vista prévia

Descripción

FluidFont. js es una biblioteca de JS independiente que hace que el tamaño de fuente de su texto sea lo más grande posible para caber dentro del ancho del contenedor. Ideal para un diseño web adaptable.

Funcionamiento

Agregue texto a un contenedor con un ID de CSS único.

<p id="demo">
Morbi venenatis ultricies urna adipiscing auctor. Morbi ultricies elit sit amet lectus fringilla ornare. Curabitur pulvinar tellus tristique vehicula tempor. Fusce mollis a magna facilisis luctus. Donec at hendrerit risus. Praesent a sem turpis. Mauris accumsan tellus vitae vulputate molestie. Ut ut leo et lacus rhoncus luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Establezca el ancho del contenedor en su CSS.

#demo {

width: 80%;

margin: 0 auto;
}

Incluya el script fluidfont. js en la parte inferior del documento.

<script src="FluidFont.js"></script>

El JavaScript para hacer la fuente 10% del ancho del contenedor, un tamaño mínimo de 14px, y un máximo de 64px.

// fluidFont(perc, min, max)

document.getElementById('demo').fluidFont(0.1, 14, 64);

Más usos.

//makes the font 17% of the width
document.querySelector('#myId').fluidFont(0.17);

//makes the font 3% of the width for all elements with class="myClass"
document.querySelectorAll('.myClass').fluidFont(0.03);

//sets the minimum font size to 20px
document.getElementById('myId').setMin(20);

// INTERNET EXPLORER 8: Multiple Elements
var elements = document.querySelectorAll(".myClass");
for(var i=0 ; i < elements.length ; i++) {


elements[i].fluidFont(percent);
}