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.
- Como montar una rejilla de 12 columnas (o más) que se responsive. (en un futuro publicaré una entrada explicándolo en detalle)
- Concepto de herencia en css.
- Posicionamiento fijo de cajas en css.
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.
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