Consejos de CSS de diseño responsive

Hola amigos, espero que estén bien. En esta publicación, voy a compartir algunos consejos que utilizo personalmente para hacer que los sitios web sean receptivos.

Padding/Margin: Usualmente, usamos mucho relleno cuando creamos sitios web para computadoras de escritorio, para hacerlos más atractivos. Mientras lo hace receptivo para móviles, las tabletas intentan disminuir los acolchados y márgenes existentes.

Usar em/rem/porcentajes: Intenta siempre utilizar en em/porcentajes/rem y no px, para que el texto y el tamaño de las imágenes se ajusten con respecto al ancho del dispositivo.

Flex-wrap: El uso de flexbox para alinear sus elementos HTML como, por ejemplo, <div>,<p> proporciona los elementos de fuerza en una línea o puede envolver en varias líneas de acuerdo con su ancho.

Media query: La consulta de medios debe utilizarse para establecer el ancho y la altura de acuerdo con los puntos de interrupción. El punto de interrupción se refiere al ancho en el que el sitio web comienza haberse distorsionado.

Box-Sizing: Resuelve muchos problemas relacionados con el relleno. El uso del tamaño de la caja en elementos HTML con un ancho porcentual tendrá en cuenta el relleno en lugar de tener que ajustar el ancho debido al relleno.

{
  box-sizing: border box;
}