Comment implémenter la hauteur adaptative dans bootstrap

Si vous souhaitez en savoir plus sur le bootstrap, vous pouvez cliquer sur : Tutoriel bootstrap

De nombreuses personnes utilisent la disposition raster de Boot, mais elles ne savent pas comment contrôler la hauteur proportionnellement. Cet article présentera en détail comment contrôler la disposition adaptative de la hauteur des éléments lors de la création d'une page frontale à l'aide du framework bootstrap.

Nous citons d'abord un morceau de JS en tête de page

L'extrait de code js est le suivant :

var iScale = 1;
iScale = iScale / window.devicePixelRatio;  
document.write(&#39;<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=&#39; + iScale + &#39;,minimum-scale=&#39; + iScale + &#39;,maximum-scale=&#39; + iScale + &#39;">&#39;) 
var iWidth = document.documentElement.clientWidth;
document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = iWidth / 16 + &#39;px&#39;;

Remarque : il doit être introduit avant le chargement du document, sinon il ne prendra pas effet.

Une fois l'introduction réussie, vous pouvez voir que l'attribut font-size apparaîtra sur l'élément html du document.

La deuxième chose est que nous devons utiliser less pour écrire du CSS. La raison principale est que less a des fonctions de calcul. Concernant l'utilisation de less, veuillez vous référer au site officiel less.

Moins de segment de code de style de calcul :

@s:46.875rem;
@color:~"div[class^='col']";
@{color}{
    background: #999;
    height: 200/@s;
  }

Le code ci-dessus signifie que la classe .color est ajoutée avec une hauteur de 100 pixels, puis calculée, bien sûr 200 pixels font directement 200 /@s; C'est tout. La valeur de la variable n'est pas fixe, il s'agit de la taille de la police calculée dynamiquement et la taille de la valeur est calculée en fonction de la taille du dessin de conception réel.

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!