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%;
  }
}

粘性底部按钮仅在移动设备上

1 个答案: