Tachyons se utiliza para definir el ancho máximo del elemento. En palabras simples, si el contenido es más grande que el ancho máximo, automáticamente cambiará la altura del elemento.
Sintaxis:
<div class ="mw3">...</div>
Clase de anchos máximos de diseño de taquiones:
- Clase “mw”: Se utiliza para definir el ancho máximo del elemento.
Modificadores ofrecidos por el kit de herramientas Tachyons: este modificador se usa para cambiar la escala de ancho entre 1 y 9.
Extensiones de consulta de medios:
- not-small(-ns): esta extensión de consulta de medios se usa para mostrar contenido cuando el tamaño de la pantalla es pequeño.
- medium(-m): esta extensión de consulta de medios se utiliza para mostrar contenido cuando el tamaño de la pantalla es mediano.
- grande (-l): esta extensión de consulta de medios se usa para mostrar contenido cuando el tamaño de la pantalla es grande.
Ejemplo 1: En el siguiente ejemplo, usaremos la clase básica » mw «.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
border: 2px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="mw3">GFG</div><br>
<div class="mw4">GFG</div><br>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, usaremos la clase básica «mw».
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
<style>
body{
text-align:center;
}
h1{
color:green;
}
div{
border:2px solid black;
background-color:lightgreen;
margin-left:280px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3><br>
<h4>Programming Language</h4>
<div class ="mw4">
Programming Language is indeed the fundamental unit of today’s
tech world. It is considered as the set of commands and instructions
that we give to the machines to perform a particular task.
</div>
<br>
<div class ="mw6">
Programming Language is indeed the fundamental unit of today’s
tech world. It is considered as the set of commands and instructions
that we give to the machines to perform a particular task.
</div>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/max-widths/
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