如何解决如何获取共享按钮以响应侧面浮动和底部浮动
像这样的示例,当屏幕放大时,让共享按钮响应侧面时,我遇到困难:
这是我的html
<strong><p class="mb-0 ml-2">Share this page</p><strong>
<div>
<!-- Sharingbutton Facebook -->
<a class="resp-sharing-button__link" href="..." target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small">
<div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="..."/></svg>
</div>
</div>
</a>
<!-- Sharingbutton Twitter -->
<a class="resp-sharing-button__link" href="..." target="_blank" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="..."/></svg>
</div>
</div>
</a>
<!-- Sharingbutton E-Mail -->
<a class="resp-sharing-button__link" href="..." target="_self" rel="noopener" aria-label="">
<div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
<svg xmlns="..."/></svg>
</div>
</div>
</a>
解决方法
您应该使用CSS媒体查询进行响应 https://www.w3schools.com/css/css_rwd_mediaqueries.asp
例如:
@media only screen and (max-width: 768px) {
/* browser window is 768px or smaller */
.share-div {
position:absolute;
left:0;
}
}
/* browser window is bigger than 768px */
@media only screen and (min-width: 768px) {
.share-div {
position:absolute;
bottom:0;
width:100%;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。