Merci beaucoup pour cette vidéo !! Je suis débutante et je me suis toujours cassée la tête là-dessus. Je me suis même sentie obligée d'apprendre bootstrap pour faire que mon site soit responsive alors que finalement j'en ai pas besoin à priori. C'est clair et bien expliqué. J'ai encore un peu de mal avec la subtilité des média queries mais je vais m'entrainer.
Salut Enzo. Comme d'hab au top. Dis moi pourrais tu faire une video sur le XML et comment on peut s'en servir en js. Il y a rien en fr beaucoup de choses en anglais......c'est une suggestion...Continue comme çà :)
Il faut s'habituer à ces paramètres, j'avais bien compris le css grid en le faisant via mon cours et en réessayant, impossible de mettre sur une seule colonne les items pour le mobile alors que j'ai refait pareil (enfin ce que je crois bien entendu).
Merci pour cette vidéo. Toujours super. J'aimerais savoir comment choisir et utiliser les bonnes mesures de dimensions : px, em, rem, %, fr pour le responsive.
Il n'y a pas de réponse exacte à cette question, tout dépend du code, l'utilisation de Flex & Grid peut permettre de réduire l'utilisation des medias queries, mais ça peut toujours être utile d'en utiliser avec :)
Perso avant le responsive je m'en occupait pas plus que ça vu que j'utilisait Bootstrap et que ça se gérait plus ou moins tout seul mais depuis que j'ai abandonné celui-ci pour tout coder avec Css-grid et flexbox je passe pas mal plus de temps sur le responsive et j'avoue que c'est déstabilisant d'utiliser et d'anticiper les média queries xD
salut, y'a encore du chemin ^^ mais il a quelques subtilités qui font cogiter effectivement ^^...bien plus que le HTML. par contre, dire qu'on peut se passer des media queries est une erreur qui va embrouiller pas mal de monde. ne pas les utiliser, c'est perdre pas mal de controle et là, ca marchait bien car sont des exemples tres simples mais dés que le design est un peu plus complexe, c'est pas possible de s'en passer.
Voici les tailles de base pour avoir un responsive quasi parfait ! Normalement vous devrez vous en sortir qu'avec ses tailles :) @media screen and (max-width: 1200px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 768px) { } @media screen and (max-width: 480px) { }
pas forcément ; perso je code tout à 320w ; puis je met 2 à 4 mediaquery au dessus selon comment est fait mon site, sans règle pré-établie (dernier quand même généralement à1400w, les écrans ont grandi!) . Et je rajoute souvent un mediaquery à 260w-320w pour rendre lisible à minima mon site sur les petits tel
@@kaak2270 Normalement si ton site est correctement coder, mes tailles devrait amplement te suffire. 1024px pour les tablettes, 480px pour les petits écrans et le reste pour ajuster ;) Après il peut y avoir des moment ou tu doit rajouter des media query selon comment ça réagit en réduisant
@@SkyInfinity en fait comme tu viens de le dire, ca dépends ... du site ! Donc absolument pas besoin de chiffre rigides ! (sauf pour les limites qu'on se fixe en taille max et min d'écran - encore que même ca, ça va bouger avec les années et les tailles d'écran qui augmentent...). Bref, il suffit de se servir de l'inspecteur et de ses yeux, pour créer des breakpoint à la volée selon son site ; et en mobile first ca prend peu de temps et n’est jamais trop un problème
@@kaak2270 Oui c'est sûr, mais vaut mieux penser sa structure dés le début car après ça peut être vraiment fouillis avec des breakpoints qui n'ont aucun sens, genre un breakpoint pour une seule div par exemple ^^
🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/
🎁 Tous mes cours sur UDEMY : liste-des-cours.com/
Pour les medias queries :
Max-width(1000px) = inférieur à 1000px
Min-width(1000px) = supérieur à 1000px
(Pour retenir plus facilement)
J’ai passé la moitié de mon après-midi à essayer d’adapter un page. Et là la réponse à toute mes questions. MERCI BEAUCOUP 🤩
Votre vidéo est d'une qualité EXCELLENTE ! Merci beaucoup pour ce partage !
Vous êtes vraiment un grand mon Designer, vos videos sont tjrs d'une très grende importance et précisions
Merci beaucoup pour cette vidéo !! Je suis débutante et je me suis toujours cassée la tête là-dessus. Je me suis même sentie obligée d'apprendre bootstrap pour faire que mon site soit responsive alors que finalement j'en ai pas besoin à priori. C'est clair et bien expliqué. J'ai encore un peu de mal avec la subtilité des média queries mais je vais m'entrainer.
Bonjour Professeur, super super et vraiment super, merci infiniment pour ce tuto.
Encore une belle leçon propre très bien expliquer c'est génial
Merci pour tes vidéo de design web nous parle vraiment et nous encourage à se perfection dedans. vraiment chapeau!
Trop trop bien expliqué :)
merci pour tout vos tutos
Super intéressant 🙏
trop cool la vidéo, super simple pour comprendre
merci pour cette vidéo ! de l'or pur :D
J'avoue c'est vrai , j'arrive pas à responsiver mes pages 😶😶😶
Responsiver ahaha
Salut Enzo. Comme d'hab au top. Dis moi pourrais tu faire une video sur le XML et comment on peut s'en servir en js. Il y a rien en fr beaucoup de choses en anglais......c'est une suggestion...Continue comme çà :)
Il faut s'habituer à ces paramètres, j'avais bien compris le css grid en le faisant via mon cours et en réessayant, impossible de mettre sur une seule colonne les items pour le mobile alors que j'ai refait pareil (enfin ce que je crois bien entendu).
Merci pour cette vidéo. Toujours super. J'aimerais savoir comment choisir et utiliser les bonnes mesures de dimensions : px, em, rem, %, fr pour le responsive.
Ça dépend vraiment des utilisations, j'ai fait quelques vidéos dessus déjà, notamment "la technique du 62.5%" ;).
J'arrive avec un train de retard. Mais merci pour ce petit tour de responsive.
Et pour les vh, vw également ?
Très bonne vidéo.
Le boss👊
😎🚀
En tous cas ce exceptionnel
mais du coup pas besoin des media queries ? vu que y'a flexbox et grid ? ou faut ajouter les media queries meme avec les flexbox et grid ?
Il n'y a pas de réponse exacte à cette question, tout dépend du code, l'utilisation de Flex & Grid peut permettre de réduire l'utilisation des medias queries, mais ça peut toujours être utile d'en utiliser avec :)
@@EcoleduWeb merci beaucoup :)
Perso avant le responsive je m'en occupait pas plus que ça vu que j'utilisait Bootstrap et que ça se gérait plus ou moins tout seul mais depuis que j'ai abandonné celui-ci pour tout coder avec Css-grid et flexbox je passe pas mal plus de temps sur le responsive et j'avoue que c'est déstabilisant d'utiliser et d'anticiper les média queries xD
en démarrant mobile-first, les mediaqueries restent hyper simples à gérer
Merci pr le tuto!
Juste un détail de débutant 🤔
Je comprend pas la syntaxe
( margin : 100px auto 0;) …
100px en haut, auto à gauche et à droite et 0 en bas
Le CSS est presqu'un langage de programmation
salut, y'a encore du chemin ^^ mais il a quelques subtilités qui font cogiter effectivement ^^...bien plus que le HTML.
par contre, dire qu'on peut se passer des media queries est une erreur qui va embrouiller pas mal de monde. ne pas les utiliser, c'est perdre pas mal de controle et là, ca marchait bien car sont des exemples tres simples mais dés que le design est un peu plus complexe, c'est pas possible de s'en passer.
Voici les tailles de base pour avoir un responsive quasi parfait !
Normalement vous devrez vous en sortir qu'avec ses tailles :)
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
pas forcément ; perso je code tout à 320w ; puis je met 2 à 4 mediaquery au dessus selon comment est fait mon site, sans règle pré-établie (dernier quand même généralement à1400w, les écrans ont grandi!) . Et je rajoute souvent un mediaquery à 260w-320w pour rendre lisible à minima mon site sur les petits tel
@@kaak2270 Normalement si ton site est correctement coder, mes tailles devrait amplement te suffire. 1024px pour les tablettes, 480px pour les petits écrans et le reste pour ajuster ;)
Après il peut y avoir des moment ou tu doit rajouter des media query selon comment ça réagit en réduisant
@@SkyInfinity en fait comme tu viens de le dire, ca dépends ... du site ! Donc absolument pas besoin de chiffre rigides ! (sauf pour les limites qu'on se fixe en taille max et min d'écran - encore que même ca, ça va bouger avec les années et les tailles d'écran qui augmentent...).
Bref, il suffit de se servir de l'inspecteur et de ses yeux, pour créer des breakpoint à la volée selon son site ; et en mobile first ca prend peu de temps et n’est jamais trop un problème
@@kaak2270 Oui c'est sûr, mais vaut mieux penser sa structure dés le début car après ça peut être vraiment fouillis avec des breakpoints qui n'ont aucun sens, genre un breakpoint pour une seule div par exemple ^^