Código de JavaScript - Scale Font Size

Código de JavaScript - Scale Font Size - JS

Pos: 4

Val: 2.019

Ha mantenido su posición en JavaScript (en relación al último mes)

Scale Font Size - JS

JavaScript

(3)

Actualizado el 28 de Febrero del 2022 por Scriptshow (141 códigos) (Publicado el 25 de Enero del 2022)

1.631 visualizaciones desde el 25 de Enero del 2022

Saludos,

un Script para ajustar el texto al ancho de la pantalla. Por defecto es una práctica responsive, compatible. No obstante, es también un efecto utilizado con frecuencia en Webs.
El código, está simplificado en lo posible sin perder la compatibilidad.

Espero sea útil.

Requerimientos

Un navegador web y/o dispositivo compatible.

Versión 1.0 / 1.1
(3)

Actualizado el 28 de Febrero del 2022 (Publicado el 25 de Enero del 2022)

gráfica de visualizaciones de la versión: Versión 1.0 / 1.1

1.632 visualizaciones desde el 25 de Enero del 2022

Versión 1.0 / 1.1 revisable.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

body {margin:auto;font:normal 1.0em/1.0 sans-serif;}

</style>

</head>

<body>

<div align="center">Scale Font Size</div>

<div align="center">Scale window</div>

<script type="text/javascript">

window.onload = window.onresize = function () {

var fs = document.body.offsetWidth;

document.querySelector("div").style.fontSize = (fs * 0.88) + "%";

</script>

</body>

</html>

___________________________________________________________________

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<style type="text/css">

body {width:100%;margin:auto;}

.text {margin:auto;text-align:center;font:normal 100%/100% sans-serif;}

</style>

</head>

<body>

<p class="text">Scale Text</p>

<div class="text">Test</div>

<script type="text/javascript">

window.onload = window.onresize = function() {

var w = window.innerWidth;

var p = document.querySelectorAll(".text");

for (var i = 0; i < p.length; i++) {

var t = p[i].innerHTML;

p[i].style.fontSize = Math.abs((w/t.length) * 2.0) + "px";

</script>

</body>

</html>

Comentarios sobre la versión: Versión 1.0 / 1.1 (3)

Victor

7 de Marzo del 2022

porque hay dos codigos html????

Responder

ScriptShow

7 de Marzo del 2022

Saludos Víctor.

Uno es para experimentar modificando el porcentaje y número de letras...

El otro, calcula las letras y espacios existententes, aplicando reglas para ello...

Gracias por tu interés. Espero haber aclarado posibles dudas.

Responder

Victor

9 de Marzo del 2022

Si muchas gracias

Responder