Discussion :

[pierrot10]

Bonjour,
sur un écran 1024x678, ca s'affiche bien.
Mais sur un écran de 27 pouce ou plus le site est tout petit par rapport a la dimenssion de l'écran.
Es-ce qu'il y a la possibilité d'agrandir le site en fonction de l'écran?

perso, je ne pense pas, mais peut etre qu'il y a des moyen que j'ignore.

merci

[miss_socrates]

ERREUR ! Il est tout à fait possible d'adapter la taille d'une page web à la taille de chaque écran.
Pour cela, il faut préciser dans le code css que la taille doit être à 100% ou encore en automatique (qui va adapter automatiquement la taille de la page à celle de l'écran).
Par ex.:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body{
height: auto;
width: auto;
}

ou bien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
body{
height: 100%;
width: 100%;
}

Si la taille de la page risque de trop se déformer à partir d'une taille trop grande ou trop petite, on peut utiliser les variables min-width et max-width.

[pierrot10]

Je suis septique, et les images vont aussi s'agrandir, tout comme le texte.
Si j'ai un div de height 400px, et width: 200px, es-ce quil va s'agrandr aussi???

Le problème c'est que je n'ai pas de grand écran pour tester.

Parce que dans ton exemple, c'est que body qui pourrait s'agrandir, et tout les élément enfant à body, il réagisse comment?

[Bovino]

Si j'ai un div de height 400px, et width: 200px, es-ce quil va s'agrandr aussi???

Comme l'a fait remarquer miss_socrates, ce sont les dimensions en pourcentage qui permettent d'adapter la taille des éléments, si tu fixes les valeurs en pixels, il n'y a pas besoin d'être polytechnicien pour comprendre que la taille est figée !

Ensuite, fais attention, la taille de l'écran n'est pas forcément la taille du navigateur, mais pour ça, les dimensions en % sont tout aussi adaptées.

[Invité]

Je suis septique

septique ou sceptique ?
D'un coté la fosse, de l'autre le doute...

[pierrot10]

D'acord, je vois ce que vous soulez dire. övidemment si mon div container est en pourcent, oui il d'agrandira, mais si dans un div enfant avec les dimenssion d'une image. Lui il ne s'grandira pas. Mon client lui il aimerais que ca fasse comme une "loupe".
Par exemple si sur un écran de 1024x768, iy a 1cm (exemple) de bordeur, il voudrait que sur un 32pouce, il retrouve aussi, le 1cm, et tout agrandi, image inclu. Et ca pour moi c'est pas possible. Mais on sait jamais peut etre qu'il y a une solution...

[Auteur]

Par exemple si sur un écran de 1024x768, il y a 1cm (exemple) de bordure, il voudrait que sur un 32 pouces, il retrouve aussi, le 1cm, et tout agrandi, image incluse. Et ça pour moi c'est pas possible. Mais on sait jamais peut-être qu'il y a une solution...

1cm reste 1cm

[miss_socrates]

Si, c'est tout à fait possible. Il suffit de mettre tous les éléments redimensionnables en pourcentage. Les caractères s'ils sont en pourcentage au lieu des pixels, se redimensionneront. Idem pour les images. Par contre, une bordure de 1px, si elle reste ainsi, on peut laisser les dimensions en pixels. Idem pour tout ce qui ne doit pas être redimensionné (par ex. les marges, les paddings, les inter-lignes, etc.)

[druith]

Bonjour, pour ce problème de taille la solution à la mode est l'utilisation des media queries (css3) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
@media only screen
and (min-width : 1824px) {
   /* ici code spécifique aux écrans > 1824px de large */
}

Cela permet de proposer des mises en page différentes selon les écrans.

L'autre solution que j'utilisais avant dans certaines interfaces c'est d'utiliser des block de contenu positionnés les uns par rapport aux autres avec un float:left.

Ainsi par exemple si on veut mettre des vignettes côte à côte, elles seront 4 par lignes sur des petits écrans et 8 par lignes sur des grands écrans, occupant ainsi systématiquement la largeur entière de la fenêtre.

Par contre il ne faut pas oublier que les textes ne doivent pas être trop larges (75 caractères par lignes max) et ce, quelque soit la résolution de l'écran. Que parfois il est bon d'avoir un peu de marge sur les côtés pour aider à la lecture (de l'espace, de l'espace et de l'espace !), et que l'horizontalité étant la seule chose que l'on maîtrise vraiment dans l'ergonomie web et le webdesign, il est plus simple de se tenir à un conteneur de 960px et de penser son site sans s'inquiéter des résolutions.

Moi j'ai un écran 1920*1080 depuis 3 ans et franchement ça ne me dérange pas de regarder des sites optimisés pour du 1024*768 dessus. Au contraire, au moins les informations sont bien centrées sur l'écran et j'ai pas trop à bouger la tête pour lire. Si jamais le texte est trop petit un CTRL++ et je peux lire confortablement sans scroll. Bref, on est dans le web et donc dans le compromis. À ta place, sauf demande expresse d'un client, j'attendrais de voir les statistiques des visiteurs et la résolution des écrans utilisés pour adapter mon visuel. Voir, j'attendrais de recevoir des critiques à cet égard. Il est très long et très difficile d'adapter un site à toutes les utilisations, c'est même utopique à mon avis.

En espérant avoir aidé un peu.