El tamaño receptivo de Bulma se utiliza para que su sitio web sea receptivo. Puede elegir un tamaño específico para cada ancho de ventana gráfica. Simplemente necesita agregar el ancho de la ventana gráfica al modificador de tamaño.
Clases de tamaño sensibles:
- is-size-1-mobile: esta clase se puede usar para un dispositivo móvil si el ancho es de hasta 768 px.
- is-size-1-touch: esta clase se puede usar para dispositivos móviles y tabletas si el ancho está entre 768 px y 1023 px.
- es-tamaño-1-tableta: esta clase se puede usar para tabletas, computadoras de escritorio pequeñas, computadoras de escritorio, pantalla ancha y dispositivos Full HD si el ancho está entre 768 px y 1215 px.
- is-size-1-desktop: esta clase se puede usar para dispositivos de escritorio pequeños, de pantalla ancha y Full HD, si el ancho está entre 1024 px y 1408 px y más.
- is-size-1-widescreen: esta clase se puede usar para dispositivos de pantalla ancha y Full HD, si el ancho está entre 1216 px y 1408 px o más.
- is-size-1-fullhd: esta clase se puede usar para dispositivos de escritorio y de pantalla ancha si el ancho es de 1408 px o superior.
Nota: Puede usar la misma lógica para cada uno de los 7 tamaños, debe cambiar el valor numérico de 1 y puede ser cualquier cosa entre 1 y 7.
Ejemplo: El siguiente ejemplo ilustra el tamaño de Bulma Responsive
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Typography</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b>Bulma Responsive Size </b> <br> <div class="container"> <p class="is-size-4-mobile">GeeksforGeeks</p> <p class="is-size-4-touch">GeeksforGeeks</p> <p class="is-size-4-tablet">GeeksforGeeks</p> <p class="is-size-4-desktop">GeeksforGeeks</p> <p class="is-size-4-widescreen">GeeksforGeeks</p> <p class="is-size-4-fullhd">GeeksforGeeks</p> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el tamaño de Bulma Responsive
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Typography</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'>
<style>
div{
background-color:lightgreen;
border:2px solid black;
margin:10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Responsive Size </b>
<br>
<div class="container">
<div class="is-size-4-mobile">GeeksforGeeks</div>
<div class="is-size-4-touch">GeeksforGeeks</div>
<div class="is-size-4-tablet">GeeksforGeeks</div>
<div class="is-size-4-desktop">GeeksforGeeks</div>
<div class="is-size-4-widescreen">GeeksforGeeks</div>
<div class="is-size-4-fullhd">GeeksforGeeks</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA