1485 sujets

Web Mobile et responsive web design

[Résolu] Design Responsive qui conserve la même échelle

Bonjour à tous et merci d'avance pour vos réponses Smiley biggrin

Je vous explique mon problème :
J'ai une page .html dont le design est conçu pour être affiché sur un écran paysage classique (100% / 100%)
Lorsque je réduis la fenêtre, le Design se détruit mais je ne veux pas avoir recours a l'utilisation classique des Media Queries pour modifier le design en fonction de la taille de la fenêtre.
Je voudrais que l'affichage garde la même échelle et se contente de réduire la taille au fur et a mesure.
Exemple : Une vidéo sur Netflix ou Youtube garde toujours la même échelle d'affichage peut importe la taille de la fenêtre.
J'aimerais que d'une manière semblable, des bandes noirs apparaissent autour de ma div contenant l'ensemble de ma page, mais que le design lui ne change pas.

J'espère avoir été assez claire dans mes explications.
Merci d'avance. Smiley ravi
En effet, ce que tu veux faire ne fonctionnera probablement pas mais si tu nous montrerai la page en question on pourrait peut être t'aider.
En fait je pense que tu ne veux pas parler d'échelle mais de ratio (rapport largeur/hauteur)..
Essaie un truc comme ça :
width:100vh;
height:100vh; 
margin:0 auto;


Bien sûr si tu ne veux pas un carré il faut adapter : pour un format photo 2/3 on peut fixer la largeur à 100vh et la hauteur à 66vh.

Je me suis inspiré de cet article : un block responsive qui reste carré .
Modifié par Alainpre (23 Feb 2020 - 09:48)
Le problème Alainpre est que cette solution est liée à la taille de l'écran. Il vaut bien mieux que la taille de l'élément cible soit reportée à l'élément parent qui lui aussi, de toute façon, se doit d'être responsive.

Donc, en pratique, pour un élément carré comportant la classe '.ratio' :
:root [class^="ratio"] {
    width: 100%;
    height: 0;
    margin: 0;
    padding-bottom: 100%;
}


Pour du 16/9ème (classe '.ratio-16-9') on ajoutera :
:root .ratio-16-9 {
    padding-bottom: 56.25%;
}


Exemple en live : Ratios
Exemple de code (en Stylus) : Github
Modifié par Olivier C (24 Feb 2020 - 08:28)
Bonjour et merci à tous pour vos réponses.

J'ai résolu mon problème en utilisant max-width et max-height et en jonglant avec les medias queries ! Merci a vous !
Sujet clos
Aller à