Adapter a tous les plate forme
Fermé
hybhgc
-
21 juin 2017 à 05:04
Dinath Messages postés 1602 Date d'inscription vendredi 12 avril 2013 Statut Contributeur sécurité Dernière intervention 6 novembre 2021 - 22 juin 2017 à 09:23
Dinath Messages postés 1602 Date d'inscription vendredi 12 avril 2013 Statut Contributeur sécurité Dernière intervention 6 novembre 2021 - 22 juin 2017 à 09:23
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
- Faire un trou dans une forme illustrator ✓ - Forum Illustrator
- Triez la liste comme sur cette illustration (attention, on ne voit que le début …). quel est le mot formé par les 6 dernières lettres de la colonne code ? - Forum Excel
2 réponses
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 325
21 juin 2017 à 06:08
21 juin 2017 à 06:08
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
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 452
21 juin 2017 à 12:57
21 juin 2017 à 12:57
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%;
}
}
21 juin 2017 à 12:51
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
21 juin 2017 à 14:53
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
22 juin 2017 à 04:07
22 juin 2017 à 09:23
Documente-toi.