如何有社交媒体图标调整大小适当时，显示的大小变化?

Question

我一直在通过使用max width和max height属性来改变高度和宽度，以检查图标布局是否会在屏幕尺寸变小时相应地改变。然而，我一直无法得到我重新想象的结果。下面我有HTML代码，我有一个链接，我正在努力实现。基本上，如果屏幕太小，我宁愿每行有两个图标，以使它们正确间隔。如果max-height和max-width没有帮助，我该如何实现这一点?我对图标和标签的布局很满意，因为如果屏幕尺寸足够大，只是试图让它在屏幕较小时清晰地显示出来。我的代码是一个较小的剪辑器，它是下面故意的一部分。

.picture {
height: 32px; 
width: 32px; 
}

<a href="https://about.fb.com/k" ><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 1</span></a>                            
<a class="social-link mr-2" href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 2</span></a> <a class="social-link mr-2" href="https://about.fb.com/k" target="_blank" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 3</span></a> <a class="social-link mr-2" href="https://about.fb.com/k" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png"/><span style="padding-left:3px">Label 4</span></a>

尝试实现的链接:https://share.sketchpad.app/21/bdc-02f4-1f5b64.png

Answer 1

一个选项:

• 将图标分成两行。
• 然后，使用FlexBox，使行彼此相邻，以便在大屏幕上它们看起来是一行。
• 设置flex-wrap: wrap，以便在小屏幕上第二行移动到底部。

例子:

.picture {
height: 32px;
width: 32px;
}
.container {
display: flex;
flex-wrap: wrap;
}

<div class="container">
<div class="row1">
<a href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 1</span></a>
<a class="social-link mr-2" href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 2</span></a>
</div>
<div class="row2">
<a class="social-link mr-2" href="https://about.fb.com/k" target="_blank" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 3</span></a>
<a class="social-link mr-2" href="https://about.fb.com/k" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 4</span></a>
</div>
</div>

另一个选项(没有FlexBox):

• 将图标分成两行。
• 将行改为inline-block

例子:

.picture {
height: 32px;
width: 32px;
}
.row1, .row2 {
display: inline-block;
}

<div class="container">
<div class="row1">
<a href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 1</span></a>
<a class="social-link mr-2" href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 2</span></a>
</div>
<div class="row2">
<a class="social-link mr-2" href="https://about.fb.com/k" target="_blank" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 3</span></a>
<a class="social-link mr-2" href="https://about.fb.com/k" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 4</span></a>
</div>
</div>

注意:如果你想在小屏幕上以不同的方式分隔图标，你可能需要使用媒体查询。

Answer 2

您可以为应用display: inline-block的两对使用两个容器，并在媒体查询中使用这些(全宽)块，使用如下所示的其他设置:

.wrap_all {
text-align: center;
}
.container1,
.container2 {
display: inline-block;
}
.picture {
height: 32px;
width: 32px;
}
@media (max-width: 480px) {
.container1,
.container2 {
display: block;
text-align: center;
}

<div class="wrap_all">
<div class="container1">
<a href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 1</span></a>
<a class="social-link mr-2" href="https://about.fb.com/k"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 2</span></a>
</div>
<div class="container2">
<a class="social-link mr-2" href="https://about.fb.com/k" target="_blank" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 3</span></a>
<a class="social-link mr-2" href="https://about.fb.com/k" rel="noopener noreferrer"><img class="picture" src="https://img.icons8.com/ios/452/facebook-new.png" /><span style="padding-left:3px">Label 4</span></a>
</div>
</div>