Html : mise en page adapter aux écrans

crap0 · 14-02-2022 15:22:58

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+

vv222 · 14-02-2022 16:26:22

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

crap0 · 14-02-2022 20:52:47

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?

Mugen · 14-02-2022 21:11:39

Bonsoir
Quelques pistes :
https://kinsta.com/fr/blog/design-web-responsive/
https://news.gandi.net/fr/2020/08/comme … esponsive/
https://developer.mozilla.org/fr/docs/L … ive_Design

leonlemouton · 14-02-2022 21:41:55

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)

gtalbot · 14-02-2022 22:41:34

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)

gtalbot · 14-02-2022 22:50:37

bartaba a écrit :

Bonsoir
(...)
https://developer.mozilla.org/fr/docs/L … ive_Design

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

cyrille · 15-02-2022 09:17:05

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/

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

crap0 · 16-02-2022 12:25:58

Merci !!
Vais y faire un tour !!

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

Debian-facile

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

Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

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

Re : Html : mise en page adapter aux écrans

Pied de page des forums