Hello la communauté 😉

J'ai un petit projet de site (one page, statique) et je bloque sur la CSS car j'ai choisi la méthode "Mobile First" (meilleure méthode ? ou prise de tête ?)

J'ai du mal à saisir l'intérêt pour des petits sites, et surtout comment y parvenir proprement pour des sites plus grands.

Je m'explique (pour mon petit site one page statique):

=>Dois-je faire :

une CSS commune, qui sera chargée peut importe la définition du périphérique

+

une CSS pour chaque périphérique, via media queries (en commençant par le plus petit appareil)

=>Ou:

une CSS pour chaque périphérique uniquement, via media queries (en gros chaque appareil a sa CSS)

Du coups je sais pas quelle méthode est la meilleure ?

- La première solution, le navigateur charge en premier le strict minimum commun (peu importe le périphérique) + le media query en fonction de l'appareil.

- La deuxième solution, chaque tranche d'appareil sa CSS. Mais il risque d'y avoir beaucoup de redondance dans les règles puisque je réécris tout à chaque nouveau media query. (Ca allonge le code pour rien).

D'avance merci de votre aide.

Avant je faisais du "desktop first", puis à l'aide de media query je ciblais les appareils plus petits. En gros j'avais une grosse CSS puis quelques petits media query.

Mais avec l'approche mobile first, comment m'y prendre sans avoir une CSS trop lourde ou redondante.

-
Edité par Anonyme 23 mars 2020 à 23:31:31

Bonjour,

En gros tout dépend de la complexité de ta page statique et si tu veux appliquer beaucoup de changements CSS lorsque tu passes de PC à mobile ...
Le mieux est d'utiliser les media queries
Exemple : 
  - MonProjet/
  ---- index.html
  ---- css/
  --------style.css

Dans style.css tu commences par écrire ton code CSS pour un mode 1920x1080px par exemple. 
Ensuite tu utilises les media-queries pour les autres résolutions. 

Sinon tu peux utiliser le Framework Bootstrap, mais pour une seule page, je trouve que ça ne vaut pas le coup et ça alourdie un peu ton programme.

Cordialement 

Hello KévinH,

Merci pour ta réponse.

Finalement j'ai fais un seul fichier CSS avec le code pour smartphone sans query et pour les autres définitions je fais des media queries (phone paysage, tablette(paysage), pc).

Pour Bootstrap en effet c'est trop contraignant pour un si petit projet. 

Je pense qu'avec l'expérience je cernerai un peu mieux les différents méthodes.

Oui c'est une bonne façon de faire pour un site monopage. 

Selon certaines préférences, des développeurs commencent par le CSS mobile et ensuite media queries et d'autres développeurs l'inverse, mais le résultat sera le même 

Dans ce même thème, tu peux aussi t'intéresser à SASS https://sass-lang.com/guide
C'est une autre façon d'écrire du CSS en utilisant par exemples des variables. A savoir que c'est très utilisé par les entreprises. Si tu veux des informations complémentaires, n'hésite pas. 

Bonne journée,

Kévin

Merci beaucoup pour ces informations.

Je pense me mettre bientôt au SASS, ça l'air pratique pour de gros projets

Bon weekend