A los programadores no les gusta el dise\u00f1o de GUI (interfaz gr\u00e1fica de usuario). Por tanto, el CSS (Hoja de estilo en cascada) no es lo suyo. Siempre supe que hay problemas de visualizaci\u00f3n en tel\u00e9fonos inteligentes\/dispositivos donde el ancho de la pantalla (navegador) es peque\u00f1o y angosto. Este blog estaba en un caos total antes cuando lo ve\u00eda en mi tel\u00e9fono inteligente Samsung Gallery S3.<\/p>\n
Eso es porque eleg\u00ed una plantilla que funciona mejor para escritorios con pantallas m\u00e1s anchas. No ten\u00eda tiempo y no quer\u00eda cambiarlo hasta que vi las estad\u00edsticas de visitas en Google Analytic. Aparentemente, la cifra est\u00e1 creciendo significativamente para los visitantes que provienen de tel\u00e9fonos\/dispositivos inteligentes.<\/p>\n
El wordpress o tal vez la actualizaci\u00f3n del tema mejor\u00f3 mucho. Ahora, si reduce el ancho del navegador para simular los tel\u00e9fonos inteligentes, puede ver que la p\u00e1gina no es tan mala, pero tampoco es perfecta y requiere ajustes manuales.<\/p>\n
Entonces, \u00bfqu\u00e9 es un CSS receptivo? La palabra receptivo significa que, en mi opini\u00f3n, el CSS se ajustar\u00e1 seg\u00fan diferentes situaciones (por ejemplo, el ancho de la pantalla). \u00bfHa notado que en la esquina superior izquierda de esta p\u00e1gina hay un icono de barra de herramientas vertical? Se ve bien cuando est\u00e1 en un ancho m\u00e1s amplio, sin embargo, en un ancho estrecho, colapsar\u00e1 con el contenido principal y har\u00e1 que la experiencia del usuario sea realmente fea. Decido ocultar esto cuando el ancho de la pantalla es peque\u00f1o.<\/p>\n
Entonces, el siguiente es un punto de partida r\u00e1pido para CSS receptivo.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nB\u00e1sicamente, el CSS anterior define la clase<\/strong> superior izquierda, y la segunda l\u00ednea verificar\u00e1 si el ancho de la p\u00e1gina actual (navegador, pantalla) es mayor que 1100 p\u00edxeles; de lo contrario, la parte superior izquierda se redefinir\u00e1 como oculta.<\/p>\nPara usarlo, simplemente incl\u00fayelo as\u00ed…<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nAhora, ni siquiera necesita actualizar la p\u00e1gina, el CSS responder\u00e1 inmediatamente cuando el ancho de la pantalla sea inferior a 1100 px. Por ejemplo, si est\u00e1 viendo en iPad, y cuando gira 90 grados de horizontal a vertical, el c\u00f3digo CSS responder\u00e1 y los \u00edconos estar\u00e1n ocultos.<\/p>\n