Ticker

6/recent/ticker-posts

Bootstrap: CSS @media query

Hadsonpar julio 30, 2023

 

En este tutorial práctico haremos adecuación al anterior tutorial de Bootstrap: HTML section dinámico con PHP y MariaDB con la finalidad de mejorar los diseños de la página web para que se adaptan a las propiedades (Diseño Responsivo) de la pantalla del dispositivo en uso; recordemos que esta serie de tutoriales es parte del desarrollo de una página web dinámico aplicando Bootstrap 5, PHP 8 y MariaDB; finalmente ejecutaremos la aplicación sobre el servidor de aplicaciones Apache.


Requisitos:

  1. XAMPP v3.3.0.
  2. PHP 8 y Bootstrap 5.
  3. MariaDB y PHPMyAdmin.
  4. Visual Studio Code.


Lo que veremos en este tutorial:

  1. Propiedades max-width y min-width.
  2. Establecer el rango de ancho de Media Query.
  3. Validaciones con Dimensiones Reactivos.
  4. Conclusiones y Referencias.


1. Propiedades max-width y min-width.

Existe dos propiedades a tener en cuenta al crear la media queries para diferentes los tamaños de pantalla: las propiedades max-width y min-width.

Cuando se pasa una propiedad max-width a un media query, CSS lo interpreta como un ancho que comienza en cero, es decir, cuando aún no se ha establecido una propiedad de ancho mínimo.

Una vez que la propiedad max-width tiene un valor asignado, todos los estilos dentro de esa media query particular se aplicarán a cualquier dispositivo cuyo tamaño de pantalla abarque desde 0px hasta el ancho máximo especificado.

La propiedad min-width, por otro lado, toma el valor inicial que le has asignado y aplica los estilos dentro de la regla del media query hasta que se proporcione el siguiente max-width, de esta manera se podrá definir rangos de ancho de media query:

2. Establecer el rango de ancho de Media Query.

Para el proyecto en desarrollo se establecerá los siguiente rangos de media query: 

  1. (min-width: 320px) and (max-width: 599px)
  2. (min-width: 600px) and (max-width: 767px)
  3. (min-width: 768px) and (max-width: 1024px)

Recordemos que los rango de ancho de @media query se aplicarán a las sections creadas en la página index.php como el home, about y product (services y courses no será necesario).

El primer bloque de CSS @media query se aplicará a los componentes de carousel que es parte de la section home:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* @media carousel
-------------------------------------------------- */
@media (min-width: 320px) and (max-width: 599px){
  .carousel-item {
    height: 14rem;
  }

  .carousel h1 {
    font-size: 1.6em;  
    color: #01B1ED;
    text-shadow: 1px 1px #4C0BCE;  
  }

  .carousel h3 {
    /*font-size: 0.8em;  */
    display: none;
  }

  .carousel .btn {
    font-size: 0.8em;
  }
}

@media (min-width: 600px) and (max-width: 767px){
  .carousel-item {
    height: 20rem;
  }

  .carousel h1 {
    font-size: 1.8em;  
    color: #01B1ED;
    text-shadow: 1px 1px #4C0BCE;  
  }

  .carousel h3 {
    font-size: 1em;
  }

  .carousel .btn {
    font-size: 1em;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .carousel-item {
    height: 25rem;
  }

  .carousel h1 {
    font-size: 2.2em;  
    color: #01B1ED;
    text-shadow: 1px 1px #4C0BCE;  
  }

  .carousel h3 {
    font-size: 1.4em;
  }
}


El segundo bloque de CSS @media query se aplicará a los componentes de jumbotron-one que es parte de la section about:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* @media jumbotron-one
-------------------------------------------------- */
@media (min-width: 320px) and (max-width: 767px){   
  .jumbotron-one h1
  {
    font-size: 2.8em;    
  }

  .jumbotron-one p
  {
    font-size: 1.3em;
    margin-top: 10px;
    font-weight: 400;
    line-height: 1.2;
    padding-bottom: 1em;
  }
}

@media (min-width: 768px) and (max-width: 912px){   
  .jumbotron-one h1
  {
    font-size: 1.5em;    
  }

  .jumbotron-one p
  {
    font-size: 1em;
    margin-top: 10px;
    font-weight: 400;
    line-height: 0.9;
    padding-bottom: 1em;
  }
}

@media (min-width: 913px) and (max-width: 1024px){   
  .jumbotron-one h1
  {
    padding-top: 25px;
    font-size: 2.4em;
  }

  .jumbotron-one p
  {
    font-size: 1.2em;
    margin-top: 10px;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 1em;
  }
}

@media (min-width: 1025px) and (max-width: 1224px){   
  .jumbotron-one h1
  {
    padding-top: 35px;
    font-size: 2.6em;
  }

  .jumbotron-one p
  {
    font-size: 1.3em;
    margin-top: 10px;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 1em;
  }
}

@media (min-width: 1225px) and (max-width: 1410px){   
  .jumbotron-one h1
  {
    padding-top: 38px;
    font-size: 3.5em;
  }

  .jumbotron-one p
  {
    font-size: 1.4em;
    margin-top: 10px;
    font-weight: 400;
    line-height: 1.3;
    padding-bottom: 1em;
  }
}


El tercer bloque de CSS @media query se aplicará a los componentes de accordion-price y accordion-faq que es parte de la section product:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
/* @media accordion-price
-------------------------------------------------- */
@media (min-width: 320px) and (max-width: 767px){

  .accordion-price h1
  {  
    font-size: 1.8em;
    color: #5a5a5a;
    line-height: 1.3; 
    margin-bottom: 0.5em;
  }

  .accordion-price p
  {
    font-size: 1.4em;
    margin-top: 0;
    line-height: 1.2;
  }  
  .accordion-faq{
    padding-top: 15px;
  }
  
  .accordion-faq p
  {
    font-size: 1em;
    margin-top: 0;
    line-height: 1em;
  }
}

@media (min-width: 768px) and (max-width: 1024px){

  .accordion-price h1
  {  
    font-size: 1.5em;
    color: #5a5a5a;
    line-height: 1.3; 
    margin-bottom: 0.5em;
  }

  .accordion-price p
  {
    font-size: 1.3em;
    margin-top: 0;
    line-height: 1.2;
  }
}


El bloque de CSS @media query se aplicará al componente en común de title-home:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* @media title-home
-------------------------------------------------- */
@media (min-width: 320px) and (max-width: 599px){
  .title-home h2
  {
    font-size: 2.2em;
    color: #01B1ED;
    text-shadow: 1px 1px #4C0BCE;
  }

  .title-home p
  {
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.2;
  }
}

3.Validaciones con Dimensiones Reactivos.

Para la validaciones utilizaremos la herramienta de Dimensions de Google Chrome o pueden añadir la extensiones desde chrome web store:

Pueden validar todos los rango de ancho de Media Query desde Dimensiones Reactivos.


4. Conclusiones y Referencias.

Conclusiones:

En este tutorial implementamos los CSS @media query a nuestra página en construcción con la finalidad de mantener un diseño responsivo.

Referencias:



Directorio 09demo-media

Comentarios y apreciaciones son bienvenido 😊, un fuerte abrazo para todos ✌...!!!
Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios