Adapter a tous les plate forme
hybhgc
-
Dinath Messages postés 1602 Date d'inscription Statut Contributeur sécurité Dernière intervention -
Dinath Messages postés 1602 Date d'inscription Statut Contributeur sécurité Dernière intervention -
Bonjour
j'ai créer un site et il n'est pas adapter a tous les plate forme il n affiche pas bien dans les tablette et les smartphones si quelqu'un peut m'aider a nous montre le code que je peut utiliser pour regler mon site
Merci !!!
j'ai créer un site et il n'est pas adapter a tous les plate forme il n affiche pas bien dans les tablette et les smartphones si quelqu'un peut m'aider a nous montre le code que je peut utiliser pour regler mon site
Merci !!!
A voir également:
- Adapter a tous les plate forme
- Mise en forme conditionnelle excel - Guide
- Mise en forme tableau word - Guide
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : - Guide
- Le fichier à télécharger contient une liste de chats. triez-la comme dans le tableau ci-dessous (attention, on ne voit que le début…). quel est le mot formé par les 8 dernières lettres de la colonne code ? - Forum Word
- Excel adapter taille cellule au texte ✓ - Forum Excel
2 réponses
Bonjour
c'est difficile de te montrer car cela demande une refonte complète du code css de ton site.
première étape: il faut changer tout ce qui a une largeur fixe par une largeur en pourcentage afin que le code s'adapte en fonction de la largeur de l'écran
seconde étape : réorganiser l'apparence du site en fonction de l'écran car si ton site s'affiche normalement sur des écrans en mode paysage (plus large que haut comme ceux des ordinateurs) quelque soit la taille de l'écran grace au pourcentage, il risque d'etre illisible pour les écrans en mode portrait (plus haut que large comme ceux des smartphones), c'est la qu'intervient les media queries qui sont des css alternatifs qui seront déclenchés par la largeur de l'écran par exemple sur ccm si tu réduis la fenêtre du navigateur en mode portrait, tu vois que le site se transforme pour n'utiliser qu'une seule colonne, les menus glissant sous le contenu .
cela demande de bonnes connaissance en css donc si tu n'y connais rien, il vaut mieux refaire ton site en utilisant un cms qui intègre nativement des thèmes responsives comme wordpress
c'est difficile de te montrer car cela demande une refonte complète du code css de ton site.
première étape: il faut changer tout ce qui a une largeur fixe par une largeur en pourcentage afin que le code s'adapte en fonction de la largeur de l'écran
seconde étape : réorganiser l'apparence du site en fonction de l'écran car si ton site s'affiche normalement sur des écrans en mode paysage (plus large que haut comme ceux des ordinateurs) quelque soit la taille de l'écran grace au pourcentage, il risque d'etre illisible pour les écrans en mode portrait (plus haut que large comme ceux des smartphones), c'est la qu'intervient les media queries qui sont des css alternatifs qui seront déclenchés par la largeur de l'écran par exemple sur ccm si tu réduis la fenêtre du navigateur en mode portrait, tu vois que le site se transforme pour n'utiliser qu'une seule colonne, les menus glissant sous le contenu .
cela demande de bonnes connaissance en css donc si tu n'y connais rien, il vaut mieux refaire ton site en utilisant un cms qui intègre nativement des thèmes responsives comme wordpress
Bonjour,
Il y a une solution minimale, proposée par AlsaCreations.com qui est de placer, dans la partie <head> de tes pages :
Puis d'ajouter à ta feuille de styles, ceci :
Il y a une solution minimale, proposée par AlsaCreations.com qui est de placer, dans la partie <head> de tes pages :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Puis d'ajouter à ta feuille de styles, ceci :
@media (max-width: 640px) {
* {
box-sizing: border-box;
}
/* passer body (et tous les éléments de largeur fixe) en largeur automatique */
body {
width: auto;
margin: 0;
padding: 0;
}
/* 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 */
}
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
.element1,
.element2 {
float: none;
width: auto;
}
/* masquer les éléments superflus */
.hide_mobile {
display: none !important;
}
/* 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%;
}
}
C'est plus de travail d'adapter un site pour qu'il devienne responsive que de faire un site responsive dés le début.
Si tu veux de l'aide, n'hésite pas a me contacter
https://www.google.fr/search?q=mobile+first+design&oq=mobile+first+design&aqs=chrome..69i57j0l5.2810j0j7&sourceid=chrome&ie=UTF-8#q=mobile+first+design+google
Documente-toi.