Cómo implementar un diseño web receptivo y sus mejores prácticas

Tengo un sitio web que utiliza píxeles para representar las páginas. Pero cuando veo el sitio web en diferentes dispositivos con una resolución de pantalla diferente, toda la página no cabe en la pantalla y si uso un porcentaje , el contenido de la página quedará comprimido .

Es el diseño web receptivo es la opción correcta para diseñar la página web. Si es así, tengo pocas preocupaciones.

  1. ¿Cuál es el riesgo involucrado en la conversión de un sitio web existente para incorporar un diseño receptivo?
  2. ¿Hay algún marco disponible para hacer esto y cuál es el mejor?
  3. Cómo se admite en dispositivos y navegadores

El uso de consultas multimedia adaptará una CSS diferente para diferentes tamaños de pantalla. La forma en que funciona es decirle al navegador: si el ancho de pantalla es 700px o más pequeño / más grande; usa css móvil Si el ancho de pantalla = 1000px o más pequeño / más grande; usa el escritorio css. No hay límite para la cantidad de consultas de medios que puede usar.

Usar porcentajes también es una posibilidad; diseño fluido Sugiero usar esto junto con las consultas de los medios.

En cuanto a los marcos, hay muchos por ahí. Bootstrap es uno de los más populares. Personalmente, creo que trabajar en dispositivos móviles primero es la mejor manera de hacerlo. Sin embargo, todavía hay un acalorado debate sobre este tema.

Como Pete mencionó en un comentario anterior; trabajar con una gradación elegante (primero en el escritorio) hará que el dispositivo se descargue tanto como el sitio del escritorio, pero no haga uso del contenido descargado. Lo cual es un gran inconveniente para el usuario. (Tiempos de carga de página más grandes, muchas solicitudes de servidor, más uso de datos MB, etc.) Por lo tanto, creo que la mejora progresiva (primero para dispositivos móviles) es el camino a seguir.

Con la mejora progresiva, el navegador siempre descargará el css móvil primero; reduciendo los tiempos de carga de página extremadamente.

Para obtener información de asistencia del navegador sobre el diseño receptivo, consulte este enlace .

Lea sobre consultas de medios para cambiar CSS de acuerdo con el ancho o alto del navegador.

Incluya la ventana gráfica para hacer que sus páginas web en dispositivos móviles se escalen correctamente.

Mire debajo de una cabeza responsiva típica de html:

      Make-Website  

y un css de respuesta típica

 html { margin: 0; padding: 0; } body { font-size: 1em; font-family: sans-serif; margin-left: 20%; width: 78%; } nav { position: fixed; top: 0; left: 0; text-align: center; width: 20%; min-height: 1500px; color: rgba(255,255,255,0.5); background-color: #34495e; } 

Ahora entiéndete a ti mismo

Si no puede entender, consulte mi sitio web a continuación: escribiendo un sitio web receptivo en un editor de texto como un bloc de notas