Les programmeurs n’aiment pas la conception GUI (interface utilisateur graphique). Par cons\u00e9quent, le CSS (Cascade Style Sheet) n’est pas leur truc. J’ai toujours su qu’il y avait des probl\u00e8mes d’affichage sur les smartphones\/appareils o\u00f9 la largeur de l’\u00e9cran (navigateur) est petite et \u00e9troite. Ce blog \u00e9tait dans un d\u00e9sordre total auparavant lors de la visualisation sur mon t\u00e9l\u00e9phone intelligent Samsung Gallery S3.<\/p>\n
C’est parce que j’ai choisi un mod\u00e8le qui fonctionne le mieux pour les ordinateurs de bureau avec des \u00e9crans plus larges. Je n’avais pas le temps et je n’ai pas voulu le changer jusqu’\u00e0 ce que je voie les statistiques de visites dans Google Analytics. Apparemment, le chiffre augmente consid\u00e9rablement pour les visiteurs provenant de t\u00e9l\u00e9phones\/appareils intelligents.<\/p>\n
Le wordpress ou peut-\u00eatre la mise \u00e0 niveau du th\u00e8me s’est beaucoup am\u00e9lior\u00e9. Maintenant, si vous r\u00e9duisez la largeur de votre navigateur pour simuler les t\u00e9l\u00e9phones intelligents, vous pouvez voir que la page n’est pas tout \u00e0 fait mauvaise, mais elle n’est pas parfaite non plus et n\u00e9cessite des ajustements manuels.<\/p>\n
Alors, qu’est-ce qu’un CSS responsive? Le mot responsive signifie que, selon moi, le CSS sera ajust\u00e9 en fonction de diff\u00e9rentes situations (par exemple la largeur de l’\u00e9cran). Avez-vous remarqu\u00e9 que dans le coin sup\u00e9rieur gauche de cette page, il y a une ic\u00f4ne barre d’outils verticale. Il a l’air bien lorsqu’il est en largeur plus large, cependant, en largeur \u00e9troite, cela s’effondrera avec le contenu principal et en fera une exp\u00e9rience utilisateur vraiment laide. Je d\u00e9cide de cacher cela lorsque la largeur de l’\u00e9cran est petite.<\/p>\n
Ce qui suit est donc un point de d\u00e9part rapide vers un CSS r\u00e9actif.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nFondamentalement, le CSS ci-dessus d\u00e9finit la classe<\/strong> topleft, et la deuxi\u00e8me ligne v\u00e9rifiera si la largeur de la page actuelle (navigateur, \u00e9cran) est sup\u00e9rieure \u00e0 1100 pixels, sinon, alors le topleft sera red\u00e9fini comme cach\u00e9.<\/p>\nPour l’utiliser, il suffit de l’inclure comme ceci\u2026<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nMaintenant, vous n’avez m\u00eame pas besoin de rafra\u00eechir la page, le CSS sera r\u00e9actif imm\u00e9diatement lorsque la largeur de l’\u00e9cran tombera en dessous de 1100px. Par exemple, si vous visualisez sur iPad et que vous tournez \u00e0 90 degr\u00e9s du paysage \u00e0 la verticale, le code CSS sera r\u00e9actif et les ic\u00f4nes seront masqu\u00e9es.<\/p>\n