Al crear un sitio web para dispositivos de pantalla pequeña como teléfonos inteligentes, es importante que usemos cada parte del espacio de la pantalla de manera inteligente, no podemos permitirnos el lujo de desperdiciar ningún área. Para conseguirlo, podemos ocultar algunos elementos periféricos en modo teléfono.
Ocultar el texto del botón en el modo de teléfono:
Ejemplo: este ejemplo se implementa usando CSS. Podemos usar consultas de medios en CSS para ocultar el texto del botón de acuerdo con el tamaño de la pantalla del dispositivo.
HTML
<!DOCTYPE html> <html> <head> <style> /* Basic styling */ #btn { width: auto; } /* It is triggered when screen size becomes <=768px */ @media(max-width:768px) { #btn-text { /* It hides the button text when screen size <=768px */ display: none; } } </style> </head> <body> <h2 style="color:green"> GeeksforGeeks </h2> <b> Hiding button text in phone mode</b><br /><br /> <button id="btn"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210520182549/myDelete.png" id="icon"> <span id="btn-text">Delete</span> </button> </body> </html>
Ejemplo 2: El siguiente ejemplo se implementa usando bootstrap .
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Including Bootstrap CSS file --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous"> <style> #btn { width: auto; } </style> </head> <body> <h2 style="color:green"> GeeksforGeeks </h2> <b> Hiding button text in phone mode </b> <br /><br /> <button> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210520182549/myDelete.png" id="icon"> <!-- In Bootstrap, d-none class sets the display property of span to none in all screen sizes and d-md-inline-block sets the display property to inline-block when screen size >=768px (medium sized displays) --> <span class="d-none d-md-inline-block"> Delete </span> </button> </body> </html>
Producción:
Nota: Ambos códigos darán el mismo resultado, solo cambiará el estilo de fuente en el caso de bootstrap debido al estilo de arranque predeterminado
Publicación traducida automáticamente
Artículo escrito por durgeshpushpakar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA