Bootstrap、CSS写自适应，如何解决高度、字体自适应问题

笔者这段时间在做一个企业官网的自适应，没有用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不好的小白来说，这个方法不是首选，所以笔者也没有去深入研究。