筆者這段時間在做一個企業官網的自適應，沒有用Bootstrap模板，而是引入Bootstrap自己寫自適應。開發過程中高度自適應、字體自適應問題對於筆者這種入門級的新手來說是個難點。比如有個div盒子在電腦端我希望他的margin-top是100px，在手機端我希望是20px。以下就是筆者關於兩者的解決辦法。
一、選擇性隱藏（Bootstrap）
這是筆者自創的一種辦法，寫一個height爲80px的div盒子，然後class爲"visible-md-block visible-lg-block"，熟悉bootstrap的讀者應該知道，md是lg適應中型設備，lg則是大型設備。這樣這個div盒子只有在中大型設備查看時纔會顯示。話不多說，我們來看看代碼和效果。
<div class="test_head visible-md-block visible-lg-block"></div>
.test_head{
background-color: white;
height: 69px;
width: 100%;
}
PC端和手機端效果如下圖紅色距離：
可以看出在不同設備上高度距離已經發生了變化。當然，這個辦法也可以用“旁門左道”來形容，但是對於不會寫高自適應的小白也不失爲一個可取的辦法。接下來筆者再介紹一種比較正統的辦法。
二、響應式佈局（CSS）
CSS響應式佈局的思想是在不同的設備上展示不同的css樣式，比如@media(min-width:700px){}則是當最小寬度達到700px時優先加載括號中的樣式（也有@media(max-width:700px)），其實掌握這個辦法後相當於是一通百通的，但是這也就意味着你要寫至少兩套css樣式。這種辦法除了用來解決高度自適應，筆者還用來做字體自適應。以下是筆者的代碼：
@media (min-width: 300px) {
.energy_control_head_background{
background: url(../imags/energy_control/energy_control_background.png) center center no-repeat;
width: 100%;
height: 350px;
}
.energy_control_head_title{
color: #FFFFFF;
font-size: 36px;
}
.energy_control_head_line{
margin: 0 auto;
width: 90%;
height: 2px;
background-color: white;
}
.energy_control_head_content{
color: #FFFFFF;
font-size: 20px;
margin-top: 17px;
}
}
@media (min-width: 700px) {
.energy_control_head_background{
background: url(../imags/energy_control/energy_control_background.png) center center no-repeat;
width: 100%;
height: 400px;
}
.energy_control_head_title{
color: #FFFFFF;
font-size: 42px;
}
.energy_control_head_line{
margin: 0 auto;
width: 500px;
height: 2px;
background-color: white;
}
.energy_control_head_content{
color: #FFFFFF;
font-size: 24px;
margin-top: 17px;
width: 520px;
margin: 0 auto;
padding: 0x;
}
}
這樣在不同設備上顯示的字體就會有變化。筆者還看過一個用JS計算屏幕尺寸的辦法，對於筆者這種JS不好的小白來說，這個方法不是首選，所以筆者也沒有去深入研究。