Podemos organizar nuestro diseño para que se adapte a una amplia variedad de dispositivos diferentes y sus tamaños de pantalla y hacerlo receptivo mediante consultas de medios. Esta variedad se define utilizando 2 tipos de parámetros, ancho de pantalla y orientación.
Puede tomar dos enfoques para crear un sitio web receptivo:
- Enfoque móvil primero: en este enfoque, el CSS existente es para la vista móvil, luego sobrescribe el CSS existente mediante consultas de medios para adaptarse a los tamaños de ancho crecientes.
- Primer enfoque de escritorio: en este enfoque, el CSS existente es para la vista de escritorio, luego sobrescribe el CSS existente mediante consultas de medios para ajustarse a los tamaños de ancho decrecientes.
Aquí, nos estamos enfocando en cómo hacer que nuestro sitio web responda usando el anterior, Mobile First Approach. Este enfoque utiliza consultas de medios de ancho mínimo y orientación horizontal.
Sintaxis:
@media (min-width: 640px) {
// CSS properties
}
Ejemplo 1: este es el sitio web inicialmente y no responde.
HTML: este archivo contiene solo la parte HTML
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <img src= "https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-what-will-you-learn.png?v=1643351169" alt=""> <p>Jenny Doe</p> </section> <main> <h1>Geeks For Geeks Courses</h1> <p> Complete preparation package will help you learn 4 years' worth of programming knowledge in just 6 months! </p> <div class="projects"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png" alt="Project 1"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png" alt="Project 2"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-video-thumbnail-image.png?v=1643351492" alt="Project 3"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/system-design-live-course-video-thumbnail-image.png" alt="Project 4"> </div> </main> </body> </html>
CSS: este archivo contiene CSS sin la consulta de medios.
CSS
* {
box-sizing: border-box;
font-family: "Mukta", sans-serif;
color: rgb(10, 146, 10);
}
main {
overflow-y: scroll;
height: 100vh;
padding: 40px;
}
body {
margin: 0;
display: grid;
grid-template-rows: 260px 1fr;
max-height: 100vh;
overflow: hidden;
}
h1 {
margin-top: 0;
font-size: 24px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 12px;
}
p {
margin: 0;
font-size: 16px;
font-weight: 300;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 7vw;
border-bottom: solid 1px #dbdce1;
border-right: none;
align-items: center;
}
section img {
border-radius: 50%;
width: 150px;
}
.projects img {
width: 100%;
}
.projects {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
align-items: center;
}
Producción:
Página web inicial sin consultas de medios
Ejemplo 2: este es el sitio web que inicialmente ahora usa consultas de medios.
HTML: este archivo contiene solo la parte HTML
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <img src= "https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-what-will-you-learn.png?v=1643351169" alt=""> <p>Jenny Doe</p> </section> <main> <h1>Geeks For Geeks Courses</h1> <p> Complete preparation package will help you learn 4 years' worth of programming knowledge in just 6 months! </p> <div class="projects"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png" alt="Project 1"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png" alt="Project 2"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-video-thumbnail-image.png?v=1643351492" alt="Project 3"> <img src= "https://media.geeksforgeeks.org/img-practice/banner/system-design-live-course-video-thumbnail-image.png" alt="Project 4"> </div> </main> </body> </html>
CSS: este archivo contiene CSS con la consulta de medios.
CSS
/* Initial layout for desktop first */
* {
box-sizing: border-box;
font-family: "Mukta", sans-serif;
color: rgb(10, 146, 10);
}
main {
overflow-y: scroll;
height: 100vh;
padding: 40px;
}
body {
margin: 0;
display: grid;
grid-template-rows: 260px 1fr;
max-height: 100vh;
overflow: hidden;
}
h1 {
margin-top: 0;
font-size: 24px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 12px;
}
p {
margin: 0;
font-size: 16px;
font-weight: 300;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* display: block; */
margin-left: 7vw;
border-bottom: solid 1px #dbdce1;
border-right: none;
align-items: center;
}
section img {
border-radius: 50%;
width: 150px;
}
.projects img {
width: 100%;
}
.projects {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
align-items: center;
}
/* Media Queries */
@media (min-width: 640px) {
.projects {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
}
@media (min-width: 768px) {
.projects {
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
h1 {
font-size: 40px;
}
p {
font-size: 18px;
}
}
@media (min-width: 1024px) {
.projects {
grid-template-columns: repeat(4, 1fr);
gap: 60px;
}
}
@media (min-width: 640px) and (orientation: landscape) {
body {
grid-template-columns: 160px 1fr;
grid-template-rows: none;
}
section {
border-bottom: none;
margin-left: -4px;
border-right: solid 1px #dbdce1;
}
section img {
width: 140px;
}
}
Producción:
Página web receptiva con consultas de medios
Publicación traducida automáticamente
Artículo escrito por archita2k1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA