Os programadores n\u00e3o gostam de design de GUI (Graphic User Interface). Portanto, o CSS (Cascade Style Sheet) n\u00e3o \u00e9 coisa deles. Sempre soube que h\u00e1 problemas de visualiza\u00e7\u00e3o em smartphones\/dispositivos onde a largura da tela (navegador) \u00e9 pequena e estreita. Este blog estava uma bagun\u00e7a total antes ao visualizar no meu smartphone Samsung Gallery S3.<\/p>\n
Isso porque escolhi um modelo que funciona melhor para desktops com telas mais largas. Eu n\u00e3o tinha tempo e n\u00e3o queria mudar at\u00e9 ver estat\u00edsticas de visitas no Google Analytic. Aparentemente, o n\u00famero est\u00e1 crescendo significativamente para visitantes vindos de smartphones\/dispositivos.<\/p>\n
O wordpress ou talvez a atualiza\u00e7\u00e3o do tema melhorou muito. Agora, se voc\u00ea estreitar a largura do navegador para simular os smartphones, ver\u00e1 que a p\u00e1gina n\u00e3o \u00e9 t\u00e3o ruim, mas tamb\u00e9m n\u00e3o \u00e9 perfeita e requer ajustes manuais.<\/p>\n
Ent\u00e3o, o que \u00e9 um CSS responsivo? A palavra responsivo significa que, na minha opini\u00e3o, o CSS ser\u00e1 ajustado de acordo com diferentes situa\u00e7\u00f5es (por exemplo, largura da tela). Voc\u00ea j\u00e1 reparou que no canto superior esquerdo desta p\u00e1gina, h\u00e1 um \u00edcone da barra de ferramentas vertical. Parece bom quando em largura maior, no entanto, em largura estreita, isso entrar\u00e1 em colapso com o conte\u00fado principal e tornar\u00e1 uma experi\u00eancia de usu\u00e1rio muito feia. Eu decido esconder isso quando a largura da tela \u00e9 pequena.<\/p>\n
Portanto, o seguinte \u00e9 um ponto de partida r\u00e1pido para CSS responsivo.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nBasicamente, o CSS acima define a classe<\/strong> topleft, e a segunda linha verificar\u00e1 se a largura da p\u00e1gina atual (navegador, tela) \u00e9 maior que 1100 pixels, caso contr\u00e1rio, o topleft ser\u00e1 redefinido como oculto.<\/p>\nPara us\u00e1-lo, basta inclu\u00ed-lo assim\u2026<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nAgora, voc\u00ea nem precisa atualizar a p\u00e1gina, o CSS responder\u00e1 imediatamente quando a largura da tela cair abaixo de 1100px. Por exemplo, se voc\u00ea estiver visualizando no iPad e, ao girar 90 graus da paisagem para a vertical, o c\u00f3digo CSS ser\u00e1 responsivo e os \u00edcones ficar\u00e3o ocultos.<\/p>\n