Ejercicio css para mostrar contenido específico para teléfonos y ordenadores

Ejercicio css para mostrar contenido específico para teléfonos y ordenadores

0
(0)

Algunas webs muestran un número de teléfono en un lugar muy tentador en función de si es desktop o smartphone.

En este ejercicio css vamos a abordar esta funcionalidad.

Para conseguirlo necesitarás tener claros los siguientes conceptos.

Vamos a repasarlo mediante un ejercicio.

Enunciado

Crea un documento web dónde se muestre un número de teléfono que cumpla las siguientes especificaciones:

  • Para teléfonos y smartphones el texto se verá en el pie de página y centrado.
  • Para ordenadores se verá en la esquina superior derecha.
Ejercicio css para mostrar contenido específico para teléfonos y ordenadores 1
visionado smartphone
visionado desktop
visionado desktop

Como pista para la resolución del ejercicio puedes usar los siguientes media queries.

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

Solución del ejercicio

La solución se basa en combinar un posicionamiento fijo con los media queries facilitados en el enunciado.

Para versión smartphone le damos un bottom:0; y un left:40% aproximado en el centro. Fijaros que el centrado no es perfecto. En caso de haberlo querido habríamos seguido los mismos pasos que se detallan en este ejercicio.

Al llegar a la versión de escritorio reiniciamos los estilos los indicados para versión smartphone. De este modo quedamos libres para usar las propiedades top y right.

¿Como queda el documento html?

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="author" content="Francesc Ricart">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Solución ejercicio</title>
	<!-- <link rel="stylesheet" href="css/reset.css"> -->
	<!-- <link rel="stylesheet" href="css/rejilla.css"> -->
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

	<div id="telefono">977203232</div>

</body>
</html>

¿Como queda el documento style.css?

#telefono{
	font-size:32px;
	font-weight:bold;
	position:fixed;
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	#telefono{
		bottom:10px;
		left:40%;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	#telefono{
		top:10px;
		left:initial;
                bottom:initial;
		right:10px;
	}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

¿Te has fijado que son los media queries que se usan en bootstrap?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment