html - 粘性底部按钮仅适用于移动设备

Question

我计划添加一个按钮，该按钮将粘在屏幕底部居中，仅在移动网站上。我不希望它显示在桌面或任何其他设备上。

有人可以帮我写CSS吗？

感谢所有帮助。非常感谢!

HTML:

<div class="mobileShow">
<a href="tel:+90123123123"><img src="http://cizgiaydinlatma.com/wp-content/uploads/2016/09/pi5MKo6zT.png"></a>
</div>

CSS:

<style type="text/css">
.mobileShow {
  display: none;
}
/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .mobileShow {
    display: inline;
    width: 40%;
    position: fixed;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>

Answer 1

你就快到了!我已将您的代码放在 jsfiddle 中并对其进行调整，使按钮居中，如下所示:

.mobileShow {
  display: none;
}

/* full width of parent */
.mobileShow img{
    width: 100%;
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .mobileShow {
    display: block;
    width: 40%;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -20%;
  }
}