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

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

ejercicio css media queries

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

Ejercicio css para mostrar contenido específico para teléfonos y ordenadores 2
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.[vc_custom_heading text=»¿Como queda el documento html?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<!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>

[vc_custom_heading text=»¿Como queda el documento style.css?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

#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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *