Site responsive
Résolu
CHATENAY JEAN MAURICE
Messages postés
104
Date d'inscription
Statut
Membre
Dernière intervention
-
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription Statut Membre Dernière intervention -
CHATENAY JEAN MAURICE Messages postés 104 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Site responsive
- Site comme coco - Accueil - Réseaux sociaux
- Site de telechargement - Accueil - Outils
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
5 réponses
bonjour
c'est possible à partir du moment où tu as accès au code source (ce qui est forcément le cas sur un éditeur) puisqu'on ajoute des css spécifiques pour chaque type d'écran par contre il n'y a pas de code magique tout prêt, tu va devoir apprendre les css et adapter ton site tout seul.
c'est possible à partir du moment où tu as accès au code source (ce qui est forcément le cas sur un éditeur) puisqu'on ajoute des css spécifiques pour chaque type d'écran par contre il n'y a pas de code magique tout prêt, tu va devoir apprendre les css et adapter ton site tout seul.
Bonjour,
Sur le site AlsaCreations.com, il y a un tutoriel pour créer une feuille de styles de base pour le Web mobile :
https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
Sur le site AlsaCreations.com, il y a un tutoriel pour créer une feuille de styles de base pour le Web mobile :
https://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
Bonsoir, Jean Maurice,
moi je fais quelque chose comme cela :
moi je fais quelque chose comme cela :
<?php
$cav = 2;
for( $px = 200, $curseur_1 = 9, $curseur_2 = 5.55, $curseur_3 = 3.125, $curseur_4 = 3.125, $curseur_5 = 25, $curseur_6 = 3; $px < 2000; $px += 100 )
{
echo "\n\n@media (min-width:$px"."px)
{
body { line-height:$curseur_6"."ex; }
menu { line-height:$curseur_4"."ex; }
h1, #tresse { font-size:$curseur_1"."vw; }
#logo { width:$curseur_5"."vw } */
#page { font-size:$curseur_2"."vw; }
footer { line-height:$curseur_3"."ex; }
" ;
$curseur_1 = number_format( $curseur_1 * .925, $cav ) ;
$curseur_2 = number_format( $curseur_2 * .85, $cav ) ;
$curseur_3 = number_format( $curseur_3 * .99, $cav ) ;
$curseur_4 = number_format( $curseur_4 * 1.05, $cav ) ;
$curseur_5 = number_format( $curseur_5 * .92, $cav ) ;
$curseur_6 = number_format( $curseur_6 * 1.02, $cav ) ;
}
?>
tout ?
Générer du CSS en PHP, ce qui implique de balancer du CSS directement dans les balises <style> et de désordonner les feuilles de style.
Si tu veux faire quelque chose du genre, pourquoi ne pas utiliser un préprocesseur de CSS comme SASS ?
https://sass-lang.com/documentation/at-rules/control/for
Générer du CSS en PHP, ce qui implique de balancer du CSS directement dans les balises <style> et de désordonner les feuilles de style.
Si tu veux faire quelque chose du genre, pourquoi ne pas utiliser un préprocesseur de CSS comme SASS ?
https://sass-lang.com/documentation/at-rules/control/for
Merci à Tous de vos réponses.
Seulement, je n'y comprend rien à rien à celles-ci, étant ignare en la matière !.
Je pensais trouver "quelqu'un" qui saches me tuyauter directement "sur/pour Expression Web 4", qui aurait pu avoir rencontré, - mieux : résolu le même problème que celui que j'invoques, - voire me proposer un "additif" à insérer quelque part dans une, voire toutes les Pages de mon propre Site, pour le rendre Responsive direct !.
Mais là, je me retrouves avec des "Pros du codage généralisé", avec des réponses complètement "au-dessus" de ce que j'aurai espéré, et de mes compétences Intellectuelles Personnelles !.
Dès lors, je suis complètement paumé, car même pas en mesure de répondre, même imparfaitement, à l'une ou l'autre de ces réponses !.
Désolé.
Bien cordialement,
Jean Maurice
Seulement, je n'y comprend rien à rien à celles-ci, étant ignare en la matière !.
Je pensais trouver "quelqu'un" qui saches me tuyauter directement "sur/pour Expression Web 4", qui aurait pu avoir rencontré, - mieux : résolu le même problème que celui que j'invoques, - voire me proposer un "additif" à insérer quelque part dans une, voire toutes les Pages de mon propre Site, pour le rendre Responsive direct !.
Mais là, je me retrouves avec des "Pros du codage généralisé", avec des réponses complètement "au-dessus" de ce que j'aurai espéré, et de mes compétences Intellectuelles Personnelles !.
Dès lors, je suis complètement paumé, car même pas en mesure de répondre, même imparfaitement, à l'une ou l'autre de ces réponses !.
Désolé.
Bien cordialement,
Jean Maurice
Bonjour,
Dans ma réponse, il y a un lien vers une page qui explique qu'il faut insérer une balise <meta> dans la partie <head> de toutes tes pages :
https://forums.commentcamarche.net/forum/affich-36657846-site-responsive#2
Puis, un code CSS à insérer à ta feuille de styles :
Une feuille de styles est un fichier contenant du code CSS, en général elle se présente sous la forme d'un fichier style.css que l'on place à la racine du site.
On insère cette feuille de styles aux pages du site à l'aide d'une balise à placer dans la partie <head> des fichiers html :
Je ne connais pas le logiciel que tu utilises, mais s'il est bien conçu, il devrait permettre d'ajouter des balises <meta> dans les pages HTML et il devrait utiliser une feuille de styles, modifiable.
Dans ma réponse, il y a un lien vers une page qui explique qu'il faut insérer une balise <meta> dans la partie <head> de toutes tes pages :
https://forums.commentcamarche.net/forum/affich-36657846-site-responsive#2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Puis, un code CSS à insérer à ta feuille de styles :
@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%;
}
}
Une feuille de styles est un fichier contenant du code CSS, en général elle se présente sous la forme d'un fichier style.css que l'on place à la racine du site.
On insère cette feuille de styles aux pages du site à l'aide d'une balise à placer dans la partie <head> des fichiers html :
<link rel="stylesheet" type="text/css" href="style.css">
Je ne connais pas le logiciel que tu utilises, mais s'il est bien conçu, il devrait permettre d'ajouter des balises <meta> dans les pages HTML et il devrait utiliser une feuille de styles, modifiable.
Bonsoir Dugenou.
Merci de vous démener pour mon Site.
Je sais que le Logiciel "Expression Web 4" permet de faire cela, à condition de savoir "comment" le faire !.
Mais, au risque de me répéter, je ne suis "pas" assez qualifié pour faire ces modifications !.
J'ai réussi, en quelques mois, à faire un très beau Site, mais uniquement par "copiers-collers", "sans" rien y connaitre du tout dans ce que vous me proposez !.
Uniquement via "réflexions" & "logique", et pour "775" pages, en sus !.
Mais pour faire ce que vous me présentez, il faudrait que je prennes des cours à 71 ans, et je ne vois pas, en Nouvelle-Calédonie, qui serait à même de faire cela !.
Un jour où l'autre, je tenterai de mettre en route vos propositions, sur une copie de mon Site, mais il faut d'abord que j'essaies d'y comprendre un tantinet quelque chose !.
Pour Vous, cela doit être "très" simple, mais pour moi, c'est une gageure !.
Bien cordialement,
Jean Maurice
Merci de vous démener pour mon Site.
Je sais que le Logiciel "Expression Web 4" permet de faire cela, à condition de savoir "comment" le faire !.
Mais, au risque de me répéter, je ne suis "pas" assez qualifié pour faire ces modifications !.
J'ai réussi, en quelques mois, à faire un très beau Site, mais uniquement par "copiers-collers", "sans" rien y connaitre du tout dans ce que vous me proposez !.
Uniquement via "réflexions" & "logique", et pour "775" pages, en sus !.
Mais pour faire ce que vous me présentez, il faudrait que je prennes des cours à 71 ans, et je ne vois pas, en Nouvelle-Calédonie, qui serait à même de faire cela !.
Un jour où l'autre, je tenterai de mettre en route vos propositions, sur une copie de mon Site, mais il faut d'abord que j'essaies d'y comprendre un tantinet quelque chose !.
Pour Vous, cela doit être "très" simple, mais pour moi, c'est une gageure !.
Bien cordialement,
Jean Maurice
Tout ce que je propose se fait par copié/collé, soit dans les pages HTML du site, soit dans le fichier style.css qui est attaché au site.
Pour ce qui est des pages HTML du site, il faut faire un copié/collé de ces deux lignes :
entre les balises <head> et </head> des pages HTML. Cette partie <head> se trouve en haut des pages, au-dessous de :
Pour ce qui est du code CSS, il faut aussi faire un copié/collé de ce code :
dans le fichier style.css, par exemple, à la fin du fichier.
Si tu ne fais pas ces manipulations, assez simples, tu ne pourras pas rendre ton site responsive.
Pour ce qui est des pages HTML du site, il faut faire un copié/collé de ces deux lignes :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css">
entre les balises <head> et </head> des pages HTML. Cette partie <head> se trouve en haut des pages, au-dessous de :
<!DOCTYPE html> <html lang="fr">
Pour ce qui est du code CSS, il faut aussi faire un copié/collé de ce code :
@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%;
}
}
dans le fichier style.css, par exemple, à la fin du fichier.
Si tu ne fais pas ces manipulations, assez simples, tu ne pourras pas rendre ton site responsive.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'anime un webinaire vingtomadaire : Introduction au développement web. La prochaine séance aura lieu samedi 30 mai, de 14 heures à 18 heures.
Les thèmes disponibles sont les suivants :
Mon premier site web, première partie : le moteur
mon premier site web, seconde partie : la personnalisation
introduction au langage PHP : l'exemple de la création du site web
le langage JavaScript : quelques applications
un élément ubiquitaire : le formulaire (Php, Html, Css, JavaScript)
un objet ubiquitaire : le requêteur
introduction aux Cascading Style Sheets, le langage de style du web
le site à navigation différenciée, ou single-page website
Les thèmes disponibles sont les suivants :
Mon premier site web, première partie : le moteur
mon premier site web, seconde partie : la personnalisation
introduction au langage PHP : l'exemple de la création du site web
le langage JavaScript : quelques applications
un élément ubiquitaire : le formulaire (Php, Html, Css, JavaScript)
un objet ubiquitaire : le requêteur
introduction aux Cascading Style Sheets, le langage de style du web
le site à navigation différenciée, ou single-page website
Bonjour Sacapuss2 :
Mon Site est totalement terminé, est publié depuis peu, et marche impeccablement.
Je veux juste "modifier" le nécessaire afin de le rendre "regardable" via une majorité de Médias actuels.
Pour le moment, je n'ai pas trop la "Santé" pour "apprendre" à créer quelque chose de nouveau ou de trop complexe.
Et à la lecture de votre Post, je vois que cela me serai difficile actuellement.
Mais je vous remercie pour ce dernier, et le garde sous le coude, pour le cas où !.
Merci encore.
Bien cordialement,
Jean Maurice
Mon Site est totalement terminé, est publié depuis peu, et marche impeccablement.
Je veux juste "modifier" le nécessaire afin de le rendre "regardable" via une majorité de Médias actuels.
Pour le moment, je n'ai pas trop la "Santé" pour "apprendre" à créer quelque chose de nouveau ou de trop complexe.
Et à la lecture de votre Post, je vois que cela me serai difficile actuellement.
Mais je vous remercie pour ce dernier, et le garde sous le coude, pour le cas où !.
Merci encore.
Bien cordialement,
Jean Maurice
Salut,
c'est curieux l'ordre de vos thèmes...voire le nom de vos leçons.
"navigation différencié" c'est pas tellement explicite(en fait ça veut rien dire) peut-être vous parlez d'AJAX le bon terme serait alors plutôt "asynchrone" ou "désynchronisé". ça semble beaucoup quand même pour une première session avec AJAX dans le lot.
Je vous conseille d'éprouver un peu vos cours, voire de vous inspirer de ceux existants destinés au débutant.
Un formateur informatique ;)
c'est curieux l'ordre de vos thèmes...voire le nom de vos leçons.
- CSS à la fin? Je suppose que c'est déjà décrit dans "la personnalisation" même si ça veut pas dire grand chose personnaliser un site...un site peut-il ne pas être personnel ou personnalisé?
- PHP , je suppose que vous parlez des bases de données avec. Curieux aussi de mettre ça avant le JavaScript nettement plus abordable pour commencer la programmation.
- Vos termes son mal choisit et prêtent à confusion: requêteur? ubiquitaire(il me semble qu'un terme plus juste serait agrégat ou regroupement parce que l'ubiquité c'est être partout à la fois en même temps ce qui n'est pas le cas des technologies qui sont soient serveur soient client )? expliquer HTML en parlant de moteur alors qu'un moteur en informatique c'est tout à fait autre(ça 'tourne' ou ça avance en tout cas, ce que ne fait pas HTML).
"navigation différencié" c'est pas tellement explicite(en fait ça veut rien dire) peut-être vous parlez d'AJAX le bon terme serait alors plutôt "asynchrone" ou "désynchronisé". ça semble beaucoup quand même pour une première session avec AJAX dans le lot.
Je vous conseille d'éprouver un peu vos cours, voire de vous inspirer de ceux existants destinés au débutant.
Un formateur informatique ;)