如何获取共享按钮以响应侧面浮动​​和底部浮动

问题描述

像这样的示例，当屏幕放大时，让共享按钮响应侧面时，我遇到困难：

全屏：

小屏幕：

这是我的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%;
    }
}