如何让共享按钮响应侧浮动和底部浮动答案

【问题标题】：How to get share buttons to be responsive to the Side float and bottom float如何让共享按钮响应侧浮动和底部浮动
【发布时间】：2021-02-09 06:50:09
【问题描述】：

当屏幕放大时，我很难让共享按钮响应侧面，而当屏幕变小以像这个例子一样底部浮动时：

全屏：

小屏幕：

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

【问题讨论】：

发布您的尝试。

标签： html css responsive-design css-float

【解决方案1】：

您应该使用 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%;
    }
}

【讨论】：