En este artículo, aprenderemos sobre el diseño web receptivo (RWD) . Es el enfoque más importante en el desarrollo web que crea cambios dinámicos en la apariencia de un sitio web, según el tamaño de la pantalla y la orientación del dispositivo que se utiliza para verlo. Un sitio web que responde por naturaleza se ve bien en todos los dispositivos.
¿Cuáles son los idiomas necesarios para que un sitio web sea responsivo?
Estará pensando que necesita un lenguaje complejo para que su sitio web responda. Así que la respuesta es «NO», no tienes que aprender demasiados lenguajes informáticos complejos. Para hacer su sitio web, solo necesita HTML y CSS básicos . No es un programa ni JavaScript.
¿Por qué los desarrolladores web recomiendan que siempre hagan sitios web receptivos?
La razón detrás de este pensamiento es que hay tantos dispositivos que tienen diferentes resoluciones como teléfonos inteligentes, tabletas, computadoras de escritorio y relojes inteligentes. Su necesidad de diseñar su sitio web de tal manera que su aplicación web se vea bien en todos los dispositivos. Si su sitio web no responde, su interfaz de usuario no se verá bien en otros dispositivos. No es obligatorio que la web que estés utilizando sea la misma en otros dispositivos. Por ejemplo: si está mirando este artículo en su computadora, puede ver que todo está bien, pero ahora, si abre este mismo artículo en su teléfono, puede encontrar que la interfaz de usuario ha cambiado. Esto se debe a que el sitio web responde, todo está alineado correctamente.
Interfaz de usuario de GeeksforGeeks en el escritorio:
Interfaz de usuario de GeeksforGeeks en un teléfono móvil –
Puede notar en las dos imágenes anteriores que la página web es la misma pero la interfaz de usuario es diferente. Esto se llama un sitio web receptivo.
Ejemplo: en el siguiente ejemplo, vamos a crear un sitio web receptivo en el que el elemento div comenzará a reducirse cuando cambiemos el tamaño de la resolución de la página.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: black;
text-align: center;
}
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: lightgreen;
color: green;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: grey;
color: black;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: lightgreen;
color: black;
}
.aside {
background-color: lightgreen;
padding: 15px;
color: black;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {
width: 8.33%;
}
.col-s-2 {
width: 16.66%;
}
.col-s-3 {
width: 25%;
}
.col-s-4 {
width: 33.33%;
}
.col-s-5 {
width: 41.66%;
}
.col-s-6 {
width: 50%;
}
.col-s-7 {
width: 58.33%;
}
.col-s-8 {
width: 66.66%;
}
.col-s-9 {
width: 75%;
}
.col-s-10 {
width: 83.33%;
}
.col-s-11 {
width: 91.66%;
}
.col-s-12 {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>GeeksforGeeks</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>Java</li>
<li>C++</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>GeeksforGeeks.org was created with a goal
in mind to provide well written, well
thought and well explained solutions for
selected questions. The core team of five
super geeks constituting of technology
lovers and computer science enthusiasts
have been constantly working in this direction
</p>
<h2>Where?</h2>
<p>
5th Floor, A-118, Sector 136, Noida,
Uttar Pradesh 201305
</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA