Maison > interface Web > tutoriel CSS > le corps du texte

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

高洛峰
Libérer: 2017-03-10 10:47:16
original
1579 Les gens l'ont consulté

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)
Exemples dutilisation de CSS pour conserver les proportions du contenu de la page

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>
Copier après la connexion


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%;   
}
Copier après la connexion


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 :
Exemples dutilisation de CSS pour conserver les proportions du contenu de la page

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 ratiopadding-bottom value
16:956.25%
4:375%
3:266.66%
8:562.5%
body{   
    margin:0;   
    width: 100%;   
    background: lightblue;   
}   

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

    padding-bottom: 100%;   
    border-top:5px solid #fff;   
    border-radius: 100%;   
}
Copier après la connexion


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%;   
}
Copier après la connexion


Tableau comparatif

aspect ratiomultiply width by
1:11
1:33
4:30.75
16:90.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%;   
}
Copier après la connexion


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 :
Exemples dutilisation de CSS pour conserver les proportions du contenu de la page

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);   
}
Copier après la connexion


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

p.style.height=p.offsetWidth+"px";
Copier après la connexion


Pour la mise en œuvre d'une grille carrée 2*2
Exemples dutilisation de CSS pour conserver les proportions du contenu de la page

*------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;   
        }
Copier après la connexion



 

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal