Aprendendo Design CSS Responsivo – 1

Os programadores não gostam de design de GUI (Graphic User Interface). Portanto, o CSS (Cascade Style Sheet) não é coisa deles. Sempre soube que há problemas de visualização em smartphones/dispositivos onde a largura da tela (navegador) é pequena e estreita. Este blog estava uma bagunça total antes ao visualizar no meu smartphone Samsung Gallery S3.

Isso porque escolhi um modelo que funciona melhor para desktops com telas mais largas. Eu não tinha tempo e não queria mudar até ver estatísticas de visitas no Google Analytic. Aparentemente, o número está crescendo significativamente para visitantes vindos de smartphones/dispositivos.

O wordpress ou talvez a atualização do tema melhorou muito. Agora, se você estreitar a largura do navegador para simular os smartphones, verá que a página não é tão ruim, mas também não é perfeita e requer ajustes manuais.

Então, o que é um CSS responsivo? A palavra responsivo significa que, na minha opinião, o CSS será ajustado de acordo com diferentes situações (por exemplo, largura da tela). Você já reparou que no canto superior esquerdo desta página, há um ícone da barra de ferramentas vertical. Parece bom quando em largura maior, no entanto, em largura estreita, isso entrará em colapso com o conteúdo principal e tornará uma experiência de usuário muito feia. Eu decido esconder isso quando a largura da tela é pequena.

Portanto, o seguinte é um ponto de partida rápido para CSS responsivo.

Basicamente, o CSS acima define a classe topleft, e a segunda linha verificará se a largura da página atual (navegador, tela) é maior que 1100 pixels, caso contrário, o topleft será redefinido como oculto.

Para usá-lo, basta incluí-lo assim…

Agora, você nem precisa atualizar a página, o CSS responderá imediatamente quando a largura da tela cair abaixo de 1100px. Por exemplo, se você estiver visualizando no iPad e, ao girar 90 graus da paisagem para a vertical, o código CSS será responsivo e os ícones ficarão ocultos.