20 Sep Ejercicio css para mostrar contenido específico para teléfonos y ordenadores
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.
¿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!
Entradas relacionadas:
¿Cómo emparejar tipografías en una página web sin morir en el intento? Pocas decisiones en el mundo web causan tanta controversia. ¿Necesitas herramientas para acertar?
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
Rápido ejercicio para practicar el concepto de herencia en css. Incluye solución y explicación.
No Comments