移动端手机自适应

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="headerlog">
           <img src="/fcc/img/logo-01.png" alt="" class="img-responsive">
        </div>
        <div class="headerblank">

        </div>

        <div class="header-right">

            <div class="headdes">咨询热线:&nbsp;</div>
            <div class="headtel">
                <ul>
                    <li>
                        <a href="tel:1365232" class="call">136 5232</a>
                    </li>
                    <li>
                        <a href="tel:1999366" class="call">199 9366</a>
                    </li>
                </ul>
            </div>
        </div>
</nav>

高度可变，宽度使用百分比

@media only screen and (min-width: 10px) and (max-width: 768px) {
body{
height: 100%;
}
.img-responsive{
width:90px;
float: left;
}
.headerlog{
float: left;
}
.headerblank{
height: 30px;
float: left;
}
.header-right{
font-family: PingFang SC;
float: right;
font-size: 12px;
width:145px;
}
.headdes{
float: left;
font-family: PingFang SC;

}
.next1{
    height: 300px;
}
.headtel{
    float: left;
    height: 32px;
}
.headtel ul li a{
    color: black;
}

}
@media only screen and (min-width: 768px) {
body{
height: 100%;
}
.img-responsive{
width:90px;
float: left;
}
.headerlog{
float: left;
}
.headerblank{
height: 30px;
float: left;
}
.header-right{
font-family: PingFang SC;
float: right;
font-size: 12px;
width:145px;
}
.headdes{
float: left;
font-family: PingFang SC;

}
.headtel{
    float: left;
    height: 32px;
}
 .headtel ul li a{
    color: black;
}

}