bootstrap實(shí)現(xiàn)自適應(yīng)高度的方法

小編給大家分享一下bootstrap實(shí)現(xiàn)自適應(yīng)高度的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　很多人會(huì)使用boot的柵格化布局，但是高度卻不知道怎么等比例控制，本文就詳細(xì)介紹使用bootstrap框架構(gòu)建前端頁(yè)面時(shí)如何控制元素高度自適應(yīng)布局。

首先我們?cè)陧?yè)面頭部引用一段JS  

js代碼片段如下：

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

注意：要在文檔加載前引入，否則不生效。

當(dāng)引入成功后就可以看到文檔html元素上會(huì)出現(xiàn)font-size屬性。

其次就是css我們要用less撰寫，主要是less有計(jì)算功能，關(guān)于less使用，請(qǐng)參考less官網(wǎng)。

less計(jì)算樣式代碼段：

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

如上代碼表示將.color類添加了100像素的高度，那么計(jì)算出來(lái)，當(dāng)然200像素就直接200/@s; 就可以了。  變量的值不固定，是動(dòng)態(tài)計(jì)算出來(lái)的字體大小，值的大小根據(jù)實(shí)際設(shè)計(jì)圖的尺寸計(jì)算。

以上是bootstrap實(shí)現(xiàn)自適應(yīng)高度的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！