Comment vous vous organisez pour mettre en place le responsive ?.

[Visiteur]

Salut

Je suis en train de refaire le site de notre asso. J'en suis arrivé au moment de " mettre en place " le responsive. Mais je sais pas si je suis bien organisé.

Jusqu'à présent j'utilisais, dans mon Firefox, l'outils Vue adaptative de Développement web. Avec le site www.mydevice.io je m’étais fait une liste des différentes largeurs des supports, que j'avais inséré dans l'outil Vue adaptative (320, 346, 360, 375, etc.). Pour le CSS je le met en place comme ça :

h1 {
[USER="80685"]media[/USER] (min-width:320px) and (max-width:360px) {
font-size:1.2em;
}

[USER="80685"]media[/USER] (min-width:361px) and (max-width:400px) {
font-size:1.4em;
}
}

Est-ce que c'est une bonne pratique ?

[manu93fr]

Bonjour,
si le template est bien responsive, normalement il s'occupe de TOUT !!!
par contre, tu dois respecter quelques trucs quand tu insères du contenu

Tu as un lien vers le site qu'on te dise deja si c'est bien responsive ?
Et quand on a bien un template responsive mais qu'il y a des soucis sur les rendus sur les différents devices, c'est souvent un problème de contenu mal inséré ou de modules non compatibles avec le responsive ...

[Visiteur]

J'ai oublié de préciser que j'utilise Helix3. Mais le template ne gère pas la mise en forme que j'ai fait pour certains éléments, comme mon exemple du H1, ainsi que les mise en forme des articles. C'est pour le site qui se trouve dans la signature. Par rapport au site en ligne celui que je refait (en local) a des petit changement. Mais dans l'ensemble c'est la même base car je ne repart pas de zéro.

[lomart]

Bonsoir,

Le mieux est de reprendre les breakpoints de Helix : 768, 992, 1200px

Sinon, en CSS votre code n'est pas correct. On met la règle mediaquerie à l’extérieur. Exemple :

media (min-width:320px) and (max-width:360px) {
  h1 {
    font-size:1.2em;
  }
}

Seul des meta-langages comme SASS autorise cette forme d'écriture, mais il la convertira lors de la génération du CSS

Autre piste. Si votre problème est que les titres change de taille en fonction de la taille écran, il existe des JS qui font très bien cela : https://www.jqueryscript.net/text/Fi...ze-Plugin.html
Vous pouvez le mettre en place facilement avec un module comme https://lomart.fr/extensions/lm-custom

[Visiteur]

Ce soir je fait mon boulet, j'ai aussi oublié de préciser que j'utilise LESS. Bon, là je pense que je n'ai rien oublié d'autre . C'est vrais que la taille du H1 je le change en responsive, mais c'est aussi pour des margin, padding, etc. de d'autres éléments.

Il y a certaine chose que je n'ai sans doute pas bien assimilé dans le responsive, donc je vais essayer de bien expliquer mes questionnements . Les breakpoints de Helix (768, 992, 1200px) sont en max-width, donc pour un éléments sa mise en forme doit être prise en compte pour un affichage jusqu'a 768px, puis entre 768 et 992, puis entre 992 et 1200px. Le truc c'est que entre 320px (la largeur la plus petite d’écran) et 768px il y aurait possibilité de changer une mise en forme. Je sais pas trop comment expliquer clairement ce que je veux dire.

Par contre en écrivant mon message je me dit qu'a certain moment je devrait utiliser les % au lieu des px.

[lomart]

donc pour un éléments sa mise en forme doit être prise en compte pour un affichage jusqu'a 768px, puis entre 768 et 992, puis entre 992 et 1200px.

Il sont déclaré dans l'ordre, donc c'est le dernier qui a parlé qui a raison. C'est le principe du CSS Cascaded Style Sheet
Mais du peux, par sécurité borner en mini-maxi.

je me dit qu'a certain moment je devrait utiliser les % au lieu des px.

Pour les paddings, margins ... pourquoi pas

[pjuignet]

J'espère ne pas être malvenu en m'incrustant dans ce post. Parti de protostar, j'ai pas mal modifié le template. Après il faut réadapter aux petits écrans.

Voila comment je m'y prend pour gérer le "responsive" : je réduits les marges, les bordures et les polices.

/* Formatage pour tablettes */

[USER="80685"]media[/USER] (max-width: 980px) {
    [class^="leading-"],
    .item-page > div {
      margin: 0}
}

[USER="80685"]media[/USER] (max-width: 980px) {
  div[itemprop="articleBody"] p {
     font-size: 1.1em;}
}

/* Formatage pour telephones */

[USER="80685"]media[/USER] (max-width: 480px) {
body {
    font-size: 0.9em;}
}


[USER="80685"]media[/USER] (max-width: 480px) {
  div[itemprop="blogPost"] p {
    font-size: 0.9em;}
                           h1 {
    font-size: initial;}
                           h2 {
    font-size: initial;}
                           h3 {
    font-size: initial;}
  }

[USER="80685"]media[/USER] (max-width: 480px) {
  .blog div[itemprop="blogPost"] {
  border: 0;  
  margin: 0 0 1em 0;
  padding: 0;}
}


[USER="80685"]media[/USER] (max-width: 480px) {
    div[itemprop="articleBody"] p {
     font-size: 0.9em;}
                               h1 {
    font-size: initial;}
                               h2 {
    font-size: initial;}
                               h3 {
    font-size: initial;}
}

[Visiteur]

Désolé j'ai un peu oublié de venir répondre.

Bon, je pense que je ne suis pas vraiment au point pour le responsive. Va falloir que je m'y penche beaucoup plus dessus.

Pas de souci pjuignet et merci pour ton message.