Cómo poner una imagen de ancho completo con animaciones en la página de inicio con Rails

Desarrollo responsive en Foundation (rival de Bootstrap), y la mejor forma de hacerlo es hacer que la página se vea bien en dispositivos móviles, luego expandirla a una pantalla más amplia como la de una PC, ya sabes … “Responsive First”, así que cuando llegues a una página más ancha la pantalla agrega cosas y las modifica para que se vea bien también en las PC.

Su herramienta principal aquí son los porcentajes, ya que solo arreglar la posición de cualquier cosa se rompería fácilmente en el móvil, a veces es útil, como las barras de navegación, pero la mayoría de las veces no es una buena idea usar posiciones fijas.

Otra cosa que debe tener en mente es que necesita hacer un uso extenso de la propiedad de ancho y alto automático, por lo que su contenido cambia de tamaño según lo necesite, también tenga en cuenta el ancho y alto máximo / mínimo, a veces no desea una altura fija, pero desea un ancho mínimo para algunas resoluciones y eso puede crecer en las más grandes.

Por último, permítame darle una herramienta, un complemento para Chrome muy útil para un diseño receptivo: Viewport Resizer, le permite cambiar el tamaño de la ventana gráfica sin cambiar el tamaño de la ventana, y tiene algunas resoluciones preconfiguradas que coinciden con algunos iphones, tabletas, computadoras portátiles y el más grande es para 32 ‘, y tiene una función animada para ver cómo se ve cuando se encoge.