logo Debian Debian Debian-France Debian-Facile Debian-fr.org Forum-Debian.fr Debian ? Communautés logo inclusivité

Debian-facile

Bienvenue sur Debian-Facile, site d'aide pour les nouveaux utilisateurs de Debian.

Vous n'êtes pas identifié(e).

#1 14-02-2022 15:22:58

crap0
Membre
Lieu : Bruxelles (Be)
Distrib. : debian 12
Noyau : Linux 6.1.0-17-amd64
(G)UI : i3
Inscription : 27-09-2018
Site Web

Html : mise en page adapter aux écrans

Bonjour.
Ce n'est pas un projet web.
C'est pour une doc personnel, facilement adaptable, transportable, échangeable, ... avec mise en page et lien cliquable que j'utilise le code html ...
Du coup, je n'ai pas besoin réellement de CSS et j'en utilise tout simplement pas. Puis toujours en local (aussi).

Mais une fois ma page faite, celle-ci s'adapte mal aux écrans de smartphone. Sur mes ordinateurs, je ne rencontre aucun problèmes.
Les caractères sont minuscule et une mauvaise manip du zoom, entraîne souvent: un clic sur un lien, ou autre par exemple, ...

Peux t-on donc mettre dans le fichier.html une ligne ou deux pour spécifier au navigateur internet qui est utiliser pour la lecture du fichier,
d'adapter la page à l'écran du matériel

(ou autres options: pour ne pas devoir toujours zoomer et dézoomer la page et donc avoir une lecture facilité)

Merci
a+

Hors ligne

#2 14-02-2022 16:26:22

vv222
Administrateur
Distrib. : Debian Sid
(G)UI : sway
Inscription : 18-11-2013
Site Web

Re : Html : mise en page adapter aux écrans

Ce que tu demandes, c’est justement le rôle du CSS.

Jouer sous Debian ? Facile !

Ceterum censeo Barum esse delendam

Hors ligne

#3 14-02-2022 20:52:47

crap0
Membre
Lieu : Bruxelles (Be)
Distrib. : debian 12
Noyau : Linux 6.1.0-17-amd64
(G)UI : i3
Inscription : 27-09-2018
Site Web

Re : Html : mise en page adapter aux écrans

Ah?
je pensais que tout ce qui pouvait être inscrit dans le CSS, pouvait aussi être inscrit dans l en-tête du html (head)..
En tout cas, pour ma part, certaines configuarations telles que les couleurs, je les met dans l en-tête.. Que le CSS, etait juste la pour uniformisé facilement les pages s'y referant.. et aussi, alléger le code pour non seulement la vitesse de chargement mzis aussi les ressources de la bécane lisant les fichiers.. ainsi 1 chargement et une lecture en mémoire..

now, je ne suis pas du tout codeur donc, y a surement des trucs qui m échappe.

si jamais si: dans le CSS, comment indiquer alors?

Hors ligne

#4 14-02-2022 21:11:39

Mugen
Membre
Distrib. : Debian Bookworm
Noyau : Linux 6.1.0-9-amd64
(G)UI : Mate
Inscription : 04-02-2014

Hors ligne

#5 14-02-2022 21:41:55

leonlemouton
Adhérent(e)
Distrib. : Debian Stable
(G)UI : Mate ∨ LXQt
Inscription : 14-08-2012

Re : Html : mise en page adapter aux écrans

Bonsoir,
et ici des infos pour placer le css dans le header du html :
https://openclassrooms.com/fr/courses/1 … /r-1609954

 
<head>
        <meta charset="utf-8" />
        <style>
            p
            {
                color: blue;
            }
        </style>
        <title>Premiers tests du CSS</title>
 </head>
 


Pour avoir le texte <p> en bleu...

Dernière modification par leonlemouton (14-02-2022 21:57:50)


Leonlemouton
°(")°

Hors ligne

#6 14-02-2022 22:41:34

gtalbot
Invité

Re : Html : mise en page adapter aux écrans

crap0 a écrit :

ma page (...) s'adapte mal aux écrans de smartphone. Sur mes ordinateurs, je ne rencontre aucun problèmes.
Les caractères sont minuscule



Normalement, la taille de police de caractères pour le texte non stylisé est définie par les préférences
de l'utilisateur ou sinon par les valeurs par défaut de l'agent utilisateur (soit un navigateur ou un
téléphone intelligent). Si l'auteur de la page web définit une taille de police de caractères pour
le texte non stylisé, alors il va forcément choisir une valeur arbitraire. Pour votre grand-mère,
une taille de 22px peut être juste parfaite, pour votre mère, une taille de 18px peut être juste
parfaite alors que pour vous (j'assume ici que vous avez 25 ans), une taille de 14px vous
convient parfaitement.
Ce que j'essaie d'expliquer c'est qu'il est impossible de pouvoir choisir une taille de police
de caractères qui va convenir à tout le monde. Donc, c'est préférable de ne pas essayer
et de laisser "parler" les préférences de l'agent utilisateur.

crap0 a écrit :


Peux t-on donc mettre dans le fichier.html une ligne ou deux pour spécifier au navigateur internet qui est utiliser pour la lecture du fichier,
d'adapter la page à l'écran du matériel



Media queries peut permettre
de créer des feuilles de style qui vont tenir
compte des dimensions de la zone de visualisation ("viewport" en anglais).
Quant à adapter la page web à la zone de visualisation, oui, c'est
possible... mais si la page contient beaucoup de blocs et de texte ou
d'images, alors le résultat ne va pas bien fonctionner. Dans votre
description, vous ne dites pas si la page web est défilable, s'il y
a débordement horizontal ("overflow" en anglais), s'il y a
débordement vertical ou 2 débordements ou s'il il ne doit
pas y avoir de débordement. À lire votre description, on ne
peut déduire ou conclure de ce que vous souhaitez faire.

Je vous propose de commencer par essayer:

<meta name="viewport" content="width=device-width, initial-scale=1">



à mettre dans la section <head> de votre page web.

Puis de consulter cette page:

Un viewport de base

"
La propriété width contrôle la taille de la zone d'affichage. Elle peut être définie sur un nombre spécifique de pixels comme width=600 ou sur la valeur spéciale device-width, qui est la largeur de l'écran en pixels CSS à une échelle de 100%. (Il existe des valeurs height et device-height correspondantes, qui peuvent être utiles pour les pages comportant des éléments qui changent de taille ou de position en fonction de la hauteur du viewport).
"

Gérard

Dernière modification par gtalbot (14-02-2022 22:44:22)

#7 14-02-2022 22:50:37

gtalbot
Invité

Re : Html : mise en page adapter aux écrans



Dans cette page, dans la section Media Queries, on donne un exemple d'un
media d'écran d'au moins 800px de large.

Gérard

#8 15-02-2022 09:17:05

cyrille
CA Debian-Facile
Lieu : Nowhere
Distrib. : SID + FreeBSD. Stable sur serveurs.
(G)UI : Xfce/Openbox
Inscription : 21-06-2020
Site Web

Re : Html : mise en page adapter aux écrans

C'est ce que l'on appelle le "responsive"

Le lien donné par bartab est très bien fait pour le comprendre :

https://kinsta.com/fr/blog/design-web-responsive/

design-responsive-adaptatif.png

Dernière modification par cyrille (15-02-2022 09:18:21)


"Ils ne me comprennent point, je ne suis pas la bouche qu’il faut à ces oreilles."

Association Debian-Facile | Les cahiers du débutant | ISO Debian-FacilePage perso. sur #df

Hors ligne

#9 16-02-2022 12:25:58

crap0
Membre
Lieu : Bruxelles (Be)
Distrib. : debian 12
Noyau : Linux 6.1.0-17-amd64
(G)UI : i3
Inscription : 27-09-2018
Site Web

Re : Html : mise en page adapter aux écrans

Merci !!
Vais y faire un tour !!

J'attends un peu de voir quoi... avant de mettre un [Résolu]...
Mais et donc: merci

Hors ligne

Pied de page des forums