From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/ratio/index.md | 134 +++++++++++++++------------------------- 1 file changed, 49 insertions(+), 85 deletions(-) (limited to 'files/fr/web/css/ratio') diff --git a/files/fr/web/css/ratio/index.md b/files/fr/web/css/ratio/index.md index cd2fc22936..4582a43c85 100644 --- a/files/fr/web/css/ratio/index.md +++ b/files/fr/web/css/ratio/index.md @@ -7,102 +7,66 @@ tags: - Type translation_of: Web/CSS/ratio --- -
{{CSSRef}}
- -

Le type de donnée CSS <ratio> permet de décrire les proportions dans les media queries (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.

- -

Syntaxe

- -

Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("<integer>")}}, suivi d'une barre oblique ('/', Unicode U+002F SOLIDUS) puis d'un second entier strictement positif (type {{cssxref("<integer>")}}). Il est possible d'avoir des espaces avant et après la barre oblique.

- -

Exemples

- -

Utiliser dans une media query

- -
@media screen and (min-aspect-ratio: 16/9) { … }
- -

Ratios fréquemment utilisés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 RatioUtilisation
4/3Format traditionnel utilisé par les télévisions au XXe siècle.
16/9Format « moderne » des télévisions.
185/100 = 91/50
- (les numérateurs et dénominateurs décimaux ne sont pas autorisés)		Le format le plus utilisé pour la projection de films depuis les années 1960.
239/100
- (les numérateurs et dénominateurs décimaux ne sont pas autorisés)		Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).
- -

Exemple appliqué

- -

CSS

- -
@media screen and (min-aspect-ratio: 1/1) {
+{{CSSRef}}
+
+Le type de donnée CSS **``** permet de décrire les proportions [dans les _media queries_](/fr/docs/Web/CSS/Media_Queries) (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.
+
+## Syntaxe
+
+Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("<integer>")}}, suivi d'une barre oblique ('/', Unicode` U+002F SOLIDUS`) puis d'un second entier strictement positif (type {{cssxref("<integer>")}}). Il est possible d'avoir des espaces avant et après la barre oblique.
+
+## Exemples
+
+### Utiliser dans une _media query_
+
+```css
+@media screen and (min-aspect-ratio: 16/9) { … }
+```
+
+### Ratios fréquemment utilisés
+
+|                      | Ratio                                                                                   | Utilisation                                                                                 |
+| -------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| ![](ratio4_3.png)    | `4/3`                                                                                   | Format traditionnel utilisé par les télévisions au XXe siècle.                   |
+| ![](ratio16_9.png)   | `16/9`                                                                                  | Format « moderne » des télévisions.                                                         |
+| ![](ratio1_1.85.png) | `185/100` = `91/50` _(les numérateurs et dénominateurs décimaux ne sont pas autorisés)_ | Le format le plus utilisé pour la projection de films depuis les années 1960.               |
+| ![](ratio1_2.39.png) | `239/100` _(les numérateurs et dénominateurs décimaux ne sont pas autorisés)_           | Le format « large » utilisé pour projeter certains films (on parle de format anamorphique). |
+
+## Exemple appliqué
+
+### CSS
+
+```css
+@media screen and (min-aspect-ratio: 1/1) {
   .exemple {
     background-color: palegreen;
   }
-}
+} +``` -

HTML

+### HTML -
<p class="exemple">
+```html
+

   Essayez de m'étirer en longueur ou de me réduire en largeur
-</p>
+

+``` -

Résultat

+### Résultat -

{{EmbedLiveSample("Exemple_appliqué","300","300")}}

+{{EmbedLiveSample("Exemple_appliqué","300","300")}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}Définition initiale.
+| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Media Queries', '#values', '<ratio>')}} | {{Spec2('CSS3 Media Queries')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("css.types.ratio")}}

+{{Compat("css.types.ratio")}} -

Voir aussi

+## Voir aussi - +- [Les _media queries_ CSS](/fr/docs/Web/CSS/Media_Queries) +- [La caractéristique média aspect-ratio](/fr/docs/Web/CSS/@media/aspect-ratio) -- cgit v1.2.3-54-g00ecf