根據屏幕大小確定是否顯示div
<style type="text/css">
.didiv{
display: none; //默認隱藏
}
@media only screen and (min-width: 0px) and (max-width: 640px){ //當屏幕爲 0-640px 時 顯示 用以下樣式
.didiv{
display: block;
position: fixed;
width: 50px;
border: 3px solid #9a5722;
margin-bottom: 62px;
right: 0px;
bottom: 0px;
border-radius: 5px;
}
.didivul>li{
padding: 5px 0px;
}
.didivulli{
background-color: #c7c7c7;
}
.didivulli>a{
width: 100%;
padding: 10px 0px;
}
.colo96{
color: #969696;
}
} //結束
.tac {
text-align: center;
}
.bgw {
background-color: white;
}
</style>
<div class="didiv tac bgw">
<ul class="didivul">
<li class="didivulli fow"><a class="dis colo3" href="javascript:;">諮詢</a></li>
<li><a href="sms:15317830112">
<p class="colo96 foz12">短信</p>
<p><img src="images/emal.png"/></p>
</a></li>
<li><a href="tel:021-54790110">
<p class="colo96 foz12">電話</p>
<p><img src="images/dianhua.png"/></p>
</a></li>
</ul>
</div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.