Apprentissage de la conception CSS réactive – 1
Les programmeurs n’aiment pas la conception GUI (interface utilisateur graphique). Par conséquent, le CSS (Cascade Style Sheet) n’est pas leur truc. J’ai toujours su qu’il y avait des problèmes d’affichage sur les smartphones/appareils où la largeur de l’écran (navigateur) est petite et étroite. Ce blog était dans un désordre total auparavant lors de la visualisation sur mon téléphone intelligent Samsung Gallery S3.
C’est parce que j’ai choisi un modèle qui fonctionne le mieux pour les ordinateurs de bureau avec des écrans plus larges. Je n’avais pas le temps et je n’ai pas voulu le changer jusqu’à ce que je voie les statistiques de visites dans Google Analytics. Apparemment, le chiffre augmente considérablement pour les visiteurs provenant de téléphones/appareils intelligents.
Le wordpress ou peut-être la mise à niveau du thème s’est beaucoup amélioré. Maintenant, si vous réduisez la largeur de votre navigateur pour simuler les téléphones intelligents, vous pouvez voir que la page n’est pas tout à fait mauvaise, mais elle n’est pas parfaite non plus et nécessite des ajustements manuels.
Alors, qu’est-ce qu’un CSS responsive? Le mot responsive signifie que, selon moi, le CSS sera ajusté en fonction de différentes situations (par exemple la largeur de l’écran). Avez-vous remarqué que dans le coin supérieur gauche de cette page, il y a une icône barre d’outils verticale. Il a l’air bien lorsqu’il est en largeur plus large, cependant, en largeur étroite, cela s’effondrera avec le contenu principal et en fera une expérience utilisateur vraiment laide. Je décide de cacher cela lorsque la largeur de l’écran est petite.
Ce qui suit est donc un point de départ rapide vers un CSS réactif.
Fondamentalement, le CSS ci-dessus définit la classe topleft, et la deuxième ligne vérifiera si la largeur de la page actuelle (navigateur, écran) est supérieure à 1100 pixels, sinon, alors le topleft sera redéfini comme caché.
Pour l’utiliser, il suffit de l’inclure comme ceci…
Maintenant, vous n’avez même pas besoin de rafraîchir la page, le CSS sera réactif immédiatement lorsque la largeur de l’écran tombera en dessous de 1100px. Par exemple, si vous visualisez sur iPad et que vous tournez à 90 degrés du paysage à la verticale, le code CSS sera réactif et les icônes seront masquées.