Estoy tratando de hacer que mi sitio responda en todos los dispositivos, especialmente en teléfonos móviles, pero no puedo encontrar la manera de hacerlo. También probé diferentes puntos de ruptura, pero no funciona. Sugiérame alguna forma de hacerlo responsivo.
Agregar un <meta name="viewport" content="width=device-width, initial-scale=1"> simple debería ayudar a agregar algunas correcciones de escala.
Tienes muchas formas, dos de ellas son:
Opción 1: CSS puro
Al usar @media , puede determinar el tamaño del navegador y escribir diferentes CSS para diferentes tamaños de navegador.
@media only screen and (min-width:768px){ Selector{ Prop: Value; } }Opcion 2:
Puede usar una biblioteca CSS receptiva como Bootstrap y usar su diseño de cuadrícula,
BS considera cada elemento contenedor como cada división como 12 columnas y puede configurar diferentes columnas para diferentes dispositivos
<div class="col-12 col-md-6" ></div>Por ejemplo, en este código corto, dije que mi división debería tomar las 12 columnas posibles de Bootstrap, PERO, debería tomar solo 6 columnas (la mitad de la página) en dispositivos medianos (md) que en bs (hasta la versión 5) son dispositivos de más de 768px