How to implement adaptive height in bootstrap

If you want to know more about bootstrap, you can click: bootstrap tutorial

Many people use Boot’s raster layout, but they don’t know how to control the height proportionally. This article will introduce in detail how to control the adaptive layout of element height when building a front-end page using the bootstrap framework.

First we quote a piece of JS at the head of the page

js code snippet is as follows:

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;;

Note: It must be introduced before the document is loaded, otherwise it will not Take effect.

After the introduction is successful, you can see that the font-size attribute will appear on the document html element.

The second thing is that we have to use less to write css. The main reason is that less has calculation functions. For information on using less, please refer to the less official website.

less calculation style code segment:

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

The above code means that the .color class is added with a height of 100 pixels, then calculated, of course 200 pixels is directly 200/@s; That's it. The value of the variable is not fixed, it is the font size calculated dynamically, and the size of the value is calculated based on the size of the actual design drawing.

The above is the detailed content of How to implement adaptive height in bootstrap. For more information, please follow other related articles on the PHP Chinese website!