Materialize/tipografia.html at master · magallon/Materialize · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<title>Ejercicio en materialize</title>
		<meta name="viewport" content="width-device-width, initial-scale=1">
		<link rel="stylesheet" href="css/materialize.min.css">
	</head>

	<body>
		<div class="container">
			<div class="row">
				<h1>Esto es un H1</h1>
				<h2>Esto es un H2</h2>
				<h3>Esto es un H3</h3>
				<h4>Esto es un H4</h4>
				<h5>Esto es un H5</h5>
				<h6>Esto es un H6</h6>

				<blockquote>
     				 Este es un ejemplo de cita, utilizando la etiqueta blockquote.
    			</blockquote>

    			<p class="flow-text col l12">Un defecto común que hemos visto en muchos frameworks es la falta de soporte para el texto verdaderamente responsivo. Mientras que otros elementos de la página responden fluidamente, el texto aún se redimensiona sobre una base fija. Para mejorar este problema, para páginas cargadas de texto, hemos creado una clase que escala de manera fluida el tamaño del texto y la altura de línea para optimizar la legibilidad del usuario. La longitud de línea se mantiene entre 45-80 caracteres y la altura de línea se escala para ser más grande en las pantallas más pequeñas.

Para ver el Flujo de Texto en acción, cambie el tamaño de su navegador lentamente y verá cambiar el tamaño de este texto. ¡Utilice el botón de arriba para activar o desactivar el flujo de texto y ver la diferencia!</p>
			</div>
		</div>


	</body>

	<script>js/materialize.min.js</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</html>