Aprendiendo Diseño Responsivo CSS – 1
A los programadores no les gusta el diseño de GUI (interfaz gráfica de usuario). Por tanto, el CSS (Hoja de estilo en cascada) no es lo suyo. Siempre supe que hay problemas de visualización en teléfonos inteligentes/dispositivos donde el ancho de la pantalla (navegador) es pequeño y angosto. Este blog estaba en un caos total antes cuando lo veía en mi teléfono inteligente Samsung Gallery S3.
Eso es porque elegí una plantilla que funciona mejor para escritorios con pantallas más anchas. No tenía tiempo y no quería cambiarlo hasta que vi las estadísticas de visitas en Google Analytic. Aparentemente, la cifra está creciendo significativamente para los visitantes que provienen de teléfonos/dispositivos inteligentes.
El wordpress o tal vez la actualización del tema mejoró mucho. Ahora, si reduce el ancho del navegador para simular los teléfonos inteligentes, puede ver que la página no es tan mala, pero tampoco es perfecta y requiere ajustes manuales.
Entonces, ¿qué es un CSS receptivo? La palabra receptivo significa que, en mi opinión, el CSS se ajustará según diferentes situaciones (por ejemplo, el ancho de la pantalla). ¿Ha notado que en la esquina superior izquierda de esta página hay un icono de barra de herramientas vertical? Se ve bien cuando está en un ancho más amplio, sin embargo, en un ancho estrecho, colapsará con el contenido principal y hará que la experiencia del usuario sea realmente fea. Decido ocultar esto cuando el ancho de la pantalla es pequeño.
Entonces, el siguiente es un punto de partida rápido para CSS receptivo.
Básicamente, el CSS anterior define la clase superior izquierda, y la segunda línea verificará si el ancho de la página actual (navegador, pantalla) es mayor que 1100 píxeles; de lo contrario, la parte superior izquierda se redefinirá como oculta.
Para usarlo, simplemente inclúyelo así…
Ahora, ni siquiera necesita actualizar la página, el CSS responderá inmediatamente cuando el ancho de la pantalla sea inferior a 1100 px. Por ejemplo, si está viendo en iPad, y cuando gira 90 grados de horizontal a vertical, el código CSS responderá y los íconos estarán ocultos.