Adapter mon site
Fermé
karimsaladi
Messages postés
6
Date d'inscription
mercredi 26 juillet 2017
Statut
Membre
Dernière intervention
30 septembre 2017
-
Modifié le 9 août 2017 à 06:13
tani68 Messages postés 469 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 22 août 2017 - 14 août 2017 à 13:49
tani68 Messages postés 469 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 22 août 2017 - 14 août 2017 à 13:49
A voir également:
- Adapter mon site
- Site de telechargement - Guide
- Site inaccessible - Guide
- Site de vente entre particulier - Guide
- Darkino site - Guide
- Site partage photo - Guide
2 réponses
elgazar
Messages postés
5841
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
17 mars 2021
1 322
Modifié le 9 août 2017 à 07:32
Modifié le 9 août 2017 à 07:32
Bonjour
en théorie c'est assez simple, il faut utiliser des dimensions relatives en pourcentage et non des dimensions fixes. Par exemple, pour une configuration classique ) à 3 colonnes (2 menus latéraux et contenu au centre), tu peux utiliser des largeurs de colonnes de 25%, 50% et 25% ainsi quelque soit la largeur de l'écran, tes menus prendront toujours un quart de la place disponible et le contenu central la moitié de n'importe quelle largeur d'écran. tu dois faire de même avec la police d'écriture et rmplacer la dimension fixe en pixel par des dimensions en em (le em est un pourcentage de la taille de la police utilisée par le navigateur, ainsi 2 em correspond a une taille de police deux fois plus grande que la normale alors que 0.5em est une taille deux fois plus petite)
en pratique, ce n'est pas aussi simple car de plus en plus d'internautes utilisent des smartphones ou des tablettes dont l'écran est en mode portrait (plus haut que large), dans ce cas ton site prendra bien toute la largeur mais sera quasi illisible du fait de la largeur réduite (par exemple pour un écran de 600 pixels de largeur, tu auras des colonnes de 150 pixels pour les menus).
il faut donc utiliser des css alternatifs (c'est ce qu'on appelle des medias queries) pour transformer l'architecture de ton site et le passer de 3 colonnes disposées horizontalement en une unique colonne si il n'y a pas une largeur d'écran suffisante.
en gros cela se traduit par: si l'écran a une largeur de plus de 800 pixels, on applique les css normales (3 colonnes classiques horizontales), si l'écran a moins de 800 pixels de largeur, on emploie les css alternatifs et on affiche le site en une seule colonne.
Il faut donc bien connaitre les css pour réaliser un site qui s'adapte à toutes les résolutions d'écran mais heureusement tu peux trouver facilement des thèmes graphiques prêt à l'emploi si tu n'a pas les connaissances nécessaires
Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
en théorie c'est assez simple, il faut utiliser des dimensions relatives en pourcentage et non des dimensions fixes. Par exemple, pour une configuration classique ) à 3 colonnes (2 menus latéraux et contenu au centre), tu peux utiliser des largeurs de colonnes de 25%, 50% et 25% ainsi quelque soit la largeur de l'écran, tes menus prendront toujours un quart de la place disponible et le contenu central la moitié de n'importe quelle largeur d'écran. tu dois faire de même avec la police d'écriture et rmplacer la dimension fixe en pixel par des dimensions en em (le em est un pourcentage de la taille de la police utilisée par le navigateur, ainsi 2 em correspond a une taille de police deux fois plus grande que la normale alors que 0.5em est une taille deux fois plus petite)
en pratique, ce n'est pas aussi simple car de plus en plus d'internautes utilisent des smartphones ou des tablettes dont l'écran est en mode portrait (plus haut que large), dans ce cas ton site prendra bien toute la largeur mais sera quasi illisible du fait de la largeur réduite (par exemple pour un écran de 600 pixels de largeur, tu auras des colonnes de 150 pixels pour les menus).
il faut donc utiliser des css alternatifs (c'est ce qu'on appelle des medias queries) pour transformer l'architecture de ton site et le passer de 3 colonnes disposées horizontalement en une unique colonne si il n'y a pas une largeur d'écran suffisante.
en gros cela se traduit par: si l'écran a une largeur de plus de 800 pixels, on applique les css normales (3 colonnes classiques horizontales), si l'écran a moins de 800 pixels de largeur, on emploie les css alternatifs et on affiche le site en une seule colonne.
Il faut donc bien connaitre les css pour réaliser un site qui s'adapte à toutes les résolutions d'écran mais heureusement tu peux trouver facilement des thèmes graphiques prêt à l'emploi si tu n'a pas les connaissances nécessaires
Avec un ordinateur, on peut faire plus rapidement des choses qu’on n’aurait pas eu besoin de faire sans ordinateur.
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
9 août 2017 à 09:39
9 août 2017 à 09:39
Bonjour,
Il existe une solution "a minima" fournie par AlsaCreation.com qui consiste à ajouter dans la partie <head> de tes pages, cette balise <meta> :
Puis, dans ta feuille de styles, ceci :
Il existe une solution "a minima" fournie par AlsaCreation.com qui consiste à ajouter dans la partie <head> de tes pages, cette balise <meta> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Puis, dans 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%;
}
}
tani68
Messages postés
469
Date d'inscription
samedi 12 août 2017
Statut
Membre
Dernière intervention
22 août 2017
198
14 août 2017 à 13:49
14 août 2017 à 13:49
Cela dépend de votre site ? C'est donc pour le rendre responsive? Sur wordpress il suffit d'avoir un template webresponsive
9 août 2017 à 09:28