Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




Hiding your face is not a solution!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo hacer un sitio web receptivo

 
 
Cómo hacer un sitio web receptivo
 
El diseño web responsivo (RWD) es el uso de HTML y CSS para cambiar el tamaño, ocultar, reducir o expandir automáticamente un sitio web, para que sea lucir genial en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).

 

Primero enfoque móvil

 
Se trata de comenzar con el diseño del producto primero para una versión móvil que incluya las funciones más básicas y luego pasamos a la versión avanzada para tablet o PC.
 
Cómo hacer un sitio web receptivo
 

Este primer enfoque Móvil evita la pérdida de contenido al pasar de una pantalla más grande a una pantalla más pequeña.
En efecto, si tomamos como punto de partida el diseño del producto final móvil, bajo restricciones como el ancho de banda,
tamaño de la pantalla, etc., los diseñadores tomarán naturalmente los puntos clave de un producto para convertirlo en un producto sobrio y ordenado con características prioritarias.
También desde 2016, sabemos que el uso de Internet móvil superó el uso de escritorio en 2016.
 

Usar consultas de medios

 
Es la tecnología CSS basada en media-queries la que permite esta adaptación.
El principio es simple: a partir de un tamaño de pantalla determinado, aplicamos un CSS específico para cambiar la presentación: esto se denomina punto de ruptura.
Con el siguiente código, el código CSS se ejecutará tan pronto como el tamaño de la pantalla sea mayor o igual a 600 px:
@media screen and (min-width: 600px) {
  /* css to execute */
}


Por ejemplo, cambiaremos el color de fondo de la página (azul) tan pronto como el tamaño de la pantalla sea mayor a 600px:
@media screen and (min-width:600px{
  body{
    background-color: red;
  }
})


 
Cómo hacer un sitio web receptivo
 

 

Consultas de medios y Mobile First

 
En un enfoque Mobile First, primero debemos crear el CSS para formatos móviles y luego usar consultas de medios para pantallas más grandes (escritorio).
De ahí el uso de la instrucción min-width que significa mayor o igual.
Siguiendo con el ejemplo anterior, vamos a cambiar el contenido de la página en relación al tamaño. Usaremos display: none para ocultar contenido inapropiado.

 

Código HTML


<!-- Mobile content -->
<p id="mobile">Mobile content</p>
<!-- Desktop content -->
<p id="desktop">Desktop content</p>


 
Cómo hacer un sitio web receptivo
 

 

Código CSS:

/* CSS pour le format mobile */
#desktop{
  display: none;
}
#mobile{
  display: block;
}

/* CSS pour les grands écrans */ @media screen and (min-width:600px){ #mobile{ display: none; } #desktop{ display: block; } })


Observe que el CSS móvil se realiza primero.



 

Agregar metaetiqueta de ventana gráfica

 
Si desea dar instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página, debe agregar HTML en el <head> parte de la siguiente metaetiqueta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


 

Ajustar el tamaño de la imagen

 
Hablamos de una imagen reactiva cuando se adapta al tamaño de las pantallas.
Para permitir que una imagen mantenga su tamaño original en una pantalla grande pero lo reduzca automáticamente en una pantalla pequeña, usamos el atributo max-width: 100%

 

Código HTML


<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for mobile */
img{
  max-width: 100%;
}
</style>
</head>
<body>
<img width="500" 
src="https://images.unsplash.com/photo-1518950957614-73ac0a001408?ixlib
=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid
=eyJhcHBfaWQiOjE0NTg5fQ&s=6c859637d2eb66855ca891674fb6bd45" alt="">
</body>
</html>


 

Mostrar diferentes imágenes dependiendo del tamaño de la pantalla

 

El HTML <imagen> La etiqueta le permite definir diferentes imágenes para diferentes tamaños de pantalla. En el siguiente ejemplo, el contenido de la imagen cambia cuando estás en una pantalla grande
<picture >
<source media="(min-width: 650px)" 
		srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
        <source media="(min-width: 465px)" srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
        <!-- img tag for browsers that do not support picture element -->
        <img src="https://googlechrome.github.io/samples/picture-element/images/kitten-small.png" alt="a cute kitten">
</picture>



Notice the media="(min-width: 500px) syntax which sets the breakpoint to 500px.
We also add, as seen previously, the CSS to adapt the image according to the size of the screen:
/* CSS for mobile */
img{
  max-width: 100%;
}


 
Cómo hacer un sitio web receptivo
 

También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú horizontal en CSS

Cómo crear un menú con css y javascript

Cómo se redondea el radio del borde en CSS?

Cómo crear un formulario de registro con HTML y CSS

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un efecto de enfoque al pasar el mouse usando CSS

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Nord VPN