Rendre mon site responsive

Signaler
-
Messages postés
6074
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
10 mai 2021
-
Bonjour,

J'ai créé mon site et j'aimerai qu'il s'adapte à tous les écrans.
J'ai essayé de regarder des tutos et de lire des cours mais rien y fait je n'y arrive pas.
Y aurait-il qqn qui pourrai m'aider car il ne me manque que ça pour le référencer.
Merci d'avance

Configuration: Windows / Chrome 89.0.4389.128

1 réponse

Messages postés
6074
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
10 mai 2021
1 409
Bonjour,

Comme tu ne donnes aucune précision, je suppose que tu as codé ton site toi-même, avec un éditeur de texte ou HTML.

Voici une solution de base, proposée sur alsacreations.com, qui peut être suffisante :

Ajouter, si elle est absente dans la partie <head> de tes pages, la balise <meta> suivante :

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Ensuite, soit entre les balises <style> de tes pages, soit dans le fichier style.css du site, ajouter le code CSS suivant :


@media (max-width: 640px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
body {
      width: auto;
      margin: 0;
      padding: 0;
    }
       /* masquer les éléments superflus */

.hide_mobile {
display: none !important;
    }
   /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
/* Un message personnalisé */

body:before {
     content: "Version mobile du site";
     display: block;
     text-align: center;
     font-style: italic;
     color: #777;
    }
}
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
} 



Bonjour et merci pour ta réponse Dugenou,


En effet, j'ai codé moi-même mon site en regardant de nombreux tutos.

J'ai essayé ta méthode mais ca n'a pas marché.  Ca a conservé en partie la mise en page pour une version mobile mais dès que je passe sur un écran plus important ça m'enlève toute mise en page.

Je vais essayer de voir encore des tutos!!

Merci encore
Messages postés
6074
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
10 mai 2021
1 409 > DST65
Bonjour,

Pour l'affichage sur un très grand écran, tu peux limiter la largeur de ton site, en utilisant les propriétés "display" ou "max-width", selon sa conception.