Tachyons es un conjunto de herramientas gratuito y de código abierto que se utiliza para crear una respuesta. En este artículo, veremos cómo aumentar la altura del elemento HTML usando los Tachyons.
Tachyons Layout Heights se usa para establecer la altura del elemento agregando una clase específica de escala específica. Contiene la altura de 5 pasos que se define en potencias de dos formas o en una serie de valores porcentuales. Un valor explícito se puede declarar dentro de cualquier padre. El valor porcentual se utilizará solo cuando la altura se declare dentro de un elemento principal.
Clases de alturas de diseño de taquiones:
- h1: Esto se usa para establecer la altura de un elemento por el valor de uno.
- h2: Esto se usa para establecer la altura de un elemento por el valor de dos.
- h3: Esto se usa para establecer la altura de un elemento por el valor de tres.
- h4: Esto se usa para establecer la altura de un elemento por el valor de cuatro.
- h5: Esto se usa para establecer la altura de un elemento por el valor de cinco.
Extensiones de consulta de medios:
- -ns = not-small: esta consulta de medios no será visible en dispositivos pequeños.
- -m = medio: esta consulta de medios solo será visible en dispositivos medianos.
- -l = grande: esta consulta de medios solo será visible en dispositivos grandes.
Sintaxis:
<div class="h1"> ... </div>
Ejemplo 1: En este ejemplo, veremos cómo usar escalas usando Tachyons.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeekforGeeks</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
div {
background-color:lightgreen;
}
body {
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Tachyons Layout Heights</h3>
<div class="h1">GeeksforGeeks</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, veremos cómo usar escalas usando Tachyons.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
div {
background-color:lightgreen;
border:2px solid black;
margin:10px;
}
body {
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="vh-25">GeeksforGeeks</div>
</center>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/heights/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA