Exemples d'utilisation de CSS pour conserver les proportions du contenu de la page

Cet article explique comment utiliser CSS pour conserver les proportions du contenu de la page. L'auteur donne des exemples de différentes méthodes telles que les pseudo-éléments et les unités vw. Les amis dans le besoin peuvent s'y référer

Description des exigences. : Terminal mobile Réalisez un demi-cercle sur la page. (Problème similaire, implémentation d'une grille carrée 4x4)

En simplifiant le problème, nous pouvons le comprendre comme l'implémentation d'un bloc avec un rapport hauteur/largeur de 1:2.

Les problèmes doivent être résolus :

1. La hauteur et la largeur sont dans une certaine proportion.

2. La hauteur et la largeur du conteneur extérieur sont incertaines.

3. Essayez de ne pas utiliser d'images et de scripts à la place.

4. Compatible avec les terminaux mobiles.

Écrivez du HTML

<p class = "semicircle"></p>

Pensez-en un, utilisez la hauteur : 100 %,

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
    width: 100%;   
    height: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}

Il y a un problème. Le pourcentage de hauteur est calculé en fonction du conteneur parent, et non du conteneur actuel, ce qui ne peut pas du tout répondre à nos besoins. L'effet est le suivant :

Le pourcentage de hauteur du corps du conteneur parent est lié à la hauteur remplie par son conteneur enfant. Même si la hauteur du corps est définie à 100%, la hauteur réelle. La hauteur remplie par le conteneur enfant, c'est-à-dire le demi-cercle, est la limite. 5, le conteneur parent ne peut pas être "complètement développé", il est donc impossible de spécifier un conteneur avec un certain rapport largeur/hauteur en définissant la hauteur du conteneur. conteneur parent en pourcentage.

En pensant 2, définissez padding-top ou padding-bottom à 100%
Le pourcentage est calculé par rapport à la largeur du bloc contenant la boîte générée [...] ( source : w3.org, c'est moi qui souligne)

Le calcul du pourcentage de largeur est lié à la largeur du bloc contenant de la boîte générée. Les pourcentages de padding-top et padding-bottom sont calculés en fonction de la largeur du conteneur parent et non de la hauteur. Autre tableau de comparaison de mise en œuvre des ratios

aspect ratio	padding-bottom value
16:9	56.25%
4:3	75%
3:2	66.66%
8:5	62.5%

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
    width: 100%;   
    height: 0;   

    padding-bottom: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}

Pensée 3, utilisez l'unité VW
Utilisez l'unité vw pour définir la hauteur et la largeur de l'élément. La taille de la machine virtuelle est définie par la largeur de la fenêtre, cette méthode peut donc être utilisée pour maintenir le conteneur affiché dans une certaine proportion. Une unité de vw est égale à un pour cent de la largeur de la fenêtre d'affichage, c'est-à-dire que 100vw est égal à 100 % de la largeur de la fenêtre d'affichage.

body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

.semicircle {   
     width: 100vw;   
      height:100vw;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}

Tableau comparatif

aspect ratio	multiply width by
1:1	1
1:3	3
4:3	0.75
16:9	0.5625

Pensée 4, Utilisation de pseudo-éléments et d'une disposition en blocs en ligne

body {   
    width: 100%;   
    font-size: 0;   
    text-align: center;   
    background: lightblue;   
}   
.semicircle {   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}   

.semicircle:before {   
    content:"";   
    display: inline-block;   
    padding-bottom: 100%;   
}

Bien que le code soit un peu compliqué, il est très flexible et peut obtenir des effets plus similaires.

Lorsque l'exigence est modifiée pour implémenter un demi-cercle couvrant 80 % de la largeur de l'écran, il suffit d'ajouter l'attribut width:80% à .semicircle, et également de centrer le conteneur.

Le principe de cette méthode est très clair :

Référez-vous à la pensée 1. Si la hauteur du conteneur extérieur ne peut pas être agrandie de 100%, vous pouvez insérer un élément de même hauteur et largeur via un pseudo-élément et des conteneurs étirés à une hauteur de un à un. Notez que cette méthode pour implémenter un demi-cercle nécessite en fait un conteneur avec un rapport largeur/hauteur de un pour un, c'est-à-dire qu'il prend deux fois plus d'espace que la méthode ci-dessus.

Paramètre : avant la limite de l'élément, principe d'analyse :

En pensant cinq, utilisez des images, compatibles avec les appareils mobiles bas de gamme.

semicircler img {   
  width: 100%;   
  background-repeat: no-repeat;   
  background-size: 100% 100%;   
  background-image: url(../img/autoresized-picture.jpg);   
}

En utilisant des scripts, le CSS est plus concis et clair, avec des objectifs clairs.

p.style.height=p.offsetWidth+"px";

Pour la mise en œuvre d'une grille carrée 2*2

*------main code-------*/   
        body {   
          width: 100%;   
          margin:0;   
          text-align: center;   
        }   
        p{   
          display: inline-block;   
          width: 50%;   
          background: lightblue;   
          font-size: 12px;   
          position: relative;   
          vertical-align: middle;   
        }   

        p:before {   
            content:"";   
            display: inline-block;   
            padding-bottom: 100%;   
            vertical-align: middle;   

        }   

        /*------other code-------*/
        p:nth-child(2),p:nth-child(3){   
            background: pink;   
        }   


        span {   
            display: inline-block;   
            vertical-align: middle;   
            font-size: 6em;   
            color: #fff;   
        }

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!