Un buen sitio web debe ser receptivo, lo que se logra mediante el uso de consultas de medios CSS. Las consultas de medios se utilizan para crear un nuevo CSS o sobrescribir el CSS existente para modificar el diseño de la pantalla según su tamaño. Hay dos parámetros que se utilizan normalmente de forma individual o junto con la consulta de medios para definir la dimensión de la pantalla, el ancho máximo/ancho mínimo y la orientación.
También hay dos enfoques que se pueden tomar para crear un sitio web receptivo:
1) Enfoque móvil primero: en este enfoque, el CSS inicial es para la vista móvil y luego la consulta de medios se usa para sobrescribir el CSS existente para que se ajuste al ancho creciente de la ventana gráfica. GeeksForGeeks tiene un artículo en https://www.geeksforgeeks.org/how-to-use-media-queries-in-a-mobile-first-approach-in-html/ en caso de que esté interesado en saber más sobre Mobile -Primera Aproximación de Media Queries.
2) Primer enfoque de escritorio: en este artículo, aprendemos sobre Primer enfoque de escritorio, en este enfoque, el CSS inicial es para la vista de escritorio, luego la consulta de medios se usa para sobrescribir el CSS existente para que se ajuste al ancho de la ventana de visualización decreciente.
Aquí, nos estamos enfocando en el primer enfoque de escritorio, usamos el parámetro max-width en lugar de ancho porque los estilos deben restringirse por debajo de un cierto tamaño de ventana gráfica, con un ancho de pantalla decreciente.
Tenemos un sitio web inicial a continuación, que solo está diseñado para vista de escritorio, con una sección de perfil a la izquierda y 4 columnas en la sección de cartera. Pero al disminuir el ancho de la pantalla, el diseño del sitio web no encaja en la ventana gráfica.
Código:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Initial layout for desktop first */
@import url(
"https://fonts.googleapis.com/css2?family=Mukta:wght@200;400&display=swap"
);
* {
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-columns: 200px 1fr;
color: #333;
max-height: 100vh;
overflow: hidden;
}
h1 {
margin-top: 0;
font-size: 40px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 12px;
}
p {
margin: 0;
font-size: 18px;
color: #434343;
font-weight: 300;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 1px solid #dbdce1;
width: 10em;
cursor: pointer;
padding: 10px;
}
section img {
border-radius: 50%;
}
section p:hover {
text-decoration: underline;
}
.projects {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 60px;
align-items: center;
}
img {
width: 100%;
}
</style>
<title>Geeks Courses - CSS Media Queries</title>
</head>
<body>
<section>
<img
src=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-what-will-you-learn.png">
<p>Jenny Doe</p>
</section>
<main>
<h1>GEEKS FOR GEEKS PROJECTS</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"
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>
Producción:
Sitio web que no responde, sin consultas de los medios.
Arriba, puede ver que la página web es perfecta para la vista de escritorio, pero a medida que se reduce el ancho de la pantalla, la página web pierde su estructura. Por lo tanto, surge la necesidad de utilizar consultas de medios para alinear la página web según el ancho y la orientación de la pantalla.
Las consultas de medios sobrescriben el código para varios anchos de pantalla y hacen que el sitio web responda.
Por ejemplo, cuando el sitio web es:
1. Más estrecho que 1024px: queremos mantener 3 columnas y un espacio de 60px cuando la pantalla es más estrecha que 1024px.
CSS
@media (max-width: 1024px) {
.projects {
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
}
2. Más angosto que 768 px: queremos mantener 2 columnas, espacio de 40 px, fuente de texto de 16 px y fuente de encabezado de 30 px cuando la pantalla es más estrecha que 768 px.
CSS
@media (max-width: 768px) {
.projects {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
h1 {
font-size: 30px;
}
p {
font-size: 16px;
}
}
3. Más estrecha que 640 px: queremos mantener una sola columna de proyectos cuando la pantalla es más estrecha que 640 px.
CSS
@media (max-width: 640px) {
.projects {
grid-template-columns: repeat(1, 1fr);
}
}
4. Más estrecho que 640 px y en modo vertical: queremos colocar la sección de perfil en la parte superior de la página en lugar de a la izquierda con un ancho de 300 px cuando la pantalla es más estrecha que 640 px y la orientación de la pantalla está en modo vertical.
CSS
@media (orientation: portrait) and (max-width: 640px) {
body {
grid-template-rows: 260px 1fr;
grid-template-columns: none;
}
section {
display: block;
margin-left: 30vw;
border-bottom: solid 1px #dbdce1;
border-right: none;
align-items: center;
}
}
Ahora, cuando incluya todas las consultas de medios anteriores para varios anchos en el código original. Obtienes un sitio web completamente receptivo.
Código:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Initial layout for desktop first */
@import url(
"https://fonts.googleapis.com/css2?family=Mukta:wght@200;400&display=swap"
);
* {
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-columns: 200px 1fr;
color: #333;
max-height: 100vh;
overflow: hidden;
}
h1 {
margin-top: 0;
font-size: 40px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 12px;
}
p {
margin: 0;
font-size: 18px;
color: #434343;
font-weight: 300;
}
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 1px solid #dbdce1;
width: 10em;
cursor: pointer;
padding: 10px;
}
section img {
border-radius: 50%;
}
section p:hover {
text-decoration: underline;
}
.projects {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 60px;
align-items: center;
}
img {
width: 100%;
}
/* Media queries */
@media (max-width: 1024px) {
.projects {
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
}
@media (max-width: 768px) {
.projects {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
h1 {
font-size: 30px;
}
p {
font-size: 16px;
}
}
@media (max-width: 640px) {
.projects {
grid-template-columns: repeat(1, 1fr);
}
}
@media (orientation: portrait) and (max-width: 640px) {
body {
grid-template-rows: 260px 1fr;
grid-template-columns: none;
}
section {
display: block;
margin-left: 30vw;
border-bottom: solid 1px #dbdce1;
border-right: none;
align-items: center;
}
}
</style>
<title>Geeks Courses - CSS Media Queries</title>
</head>
<body>
<section>
<img
src=
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-course-what-will-you-learn.png">
<p>Jenny Doe</p>
</section>
<main>
<h1>GEEKS FOR GEEKS PROJECTS</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"
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>
Salida: ahora obtiene un sitio web perfectamente receptivo que funciona para todos los dispositivos.
Sitio web completamente receptivo para todos los anchos y orientaciones.
Publicación traducida automáticamente
Artículo escrito por archita2k1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA