Rendre mon site responsive
DST65
-
dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention -
dugenou Messages postés 6087 Date d'inscription Statut Contributeur Dernière intervention -
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
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
A voir également:
- Rendre mon site responsive
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
1 réponse
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 :
Ensuite, soit entre les balises <style> de tes pages, soit dans le fichier style.css du site, ajouter le code CSS suivant :
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%;
}
}
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
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.