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