html et résolution

Je suis entrain d'essayer de développer un petit site en html et je suis assez content du résultat mais je viens de réaliser qu'il ressemble à ce que je veux uniquement en 1920x1080 (j'aurais dû m'en douter un peu...)

Du coup pour l'instant j'ai "forcé" l'affichage en 1080p mais j'aimerais savoir si c'est possible de redimensionner la page pour chaque résolution de manière "automatique". J'ai vu des gens sur des forums dire qu'il faut une feuille css pour chaque résolution, mais ça m’emmerderais un peu.

Poster un commentaire
Loupiote
Loupiote
7 ans

On appelle ça "responsive" (qui s'adapte à la taille des écrans).
Je te conseille de découvrir Bootstrap. Cela permet ça.
En gros tu vas écrire dans ton <head> le CDN de boostrap qui te permet d'utiliser les classes de bootstrap sans les copier dans ton fichier .css

Gothman
Gothman
7 ans

@Loupiote: Merci pour ta réponse, j'utilise bootstrap justement, mais j'ai dû redimensionner des images et quand j'essaye sur un pc en 1024, les images sortent de certains cadres etc...

Loupiote
Loupiote
7 ans

@Gothman: il te faut alors limiter tout cela avec des classes dans une feuille de style.
Et pas de feuille pour chaque résolution, c'est inutile.
Ton css avec boostrap est responsive.
Après, un simple :
@media (max-width= 992px){ton css} te permet de ne traiter que lorsque ton écran est inférieur à 992

Gothman
Gothman
7 ans

@Loupiote: J'ai défini les limites dans un style.css que j'ai créé mais comme l'a dit WZZz j'ai utilisé les px plutôt que les % ça pourrait en être la cause j'imagine ?

Gothman
Gothman
7 ans

@Loupiote: D'accord je vais regardé ça, merci !

Loupiote
Loupiote
7 ans

@Gothman: En effet, les % permettent de s'adapter automatiquement au taille des div ou autres. Cependant, il faut faire attention car il peut être nécessaire de donner un min-width ou min-height pour ne pas se faire piéger par une réduction vraiment trop petite.
Mais en effet, j'ai généralement un width:100%;
Height:auto;
Comme tu sembles commencer, tu vas apprécier ce lien:
http://howtocenterincss.com

sainsi
sainsi
7 ans

@Loupiote: Ajoute à tes images la class .img-responsive.

Loupiote
Loupiote
7 ans

@sainsi: merci :)

WZZz
WZZz
7 ans

il faut utiliser les media queries
https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries

en gros ca t applique du css suivant la taille de ta page

Apres pour avoir un truc vraiment responsive c'est mieux d'utiliser des valeurs en % plutot qu en px sinon la tendance en ce moment c'est d utiliser flexbox

Gothman
Gothman
7 ans

@WZZz: Oui c'est que j'avais vu mais du coup il me faut une feuille de style pour chaque résolution non ?

Et j'ai majoritairement utilisé les px plutôt que les % donc c'est probablement la cause de mon problème effectivement.

Cette page est réservée aux ADULTES

Tu es sur le point d'accéder à un site web qui contient du matériel explicite (pornographie).

Tu ne dois accéder à ce site que si tu as au moins 18 ans ou si tu as l'âge légal pour visionner ce type de matériel dans ta juridiction locale, l’âge le plus élevé étant retenu. En outre, tu déclares et garantis que tu ne permettras aucun mineur à d'accéder à ce site ou à ces services.


En accédant à ce site, tu acceptes nos conditions d'utilisation.