当显示大小发生变化时，如何正确调整社交媒体图标的大小？

Question

我一直在通过使用最大宽度和最大高度属性来更改高度和宽度，以检查当显示屏幕尺寸变小时时图标布局是否会相应更改。但是，我一直无法得到我正在重新想象的结果。下面我有 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>

Answer 3

lo que estas implementando lo puedes hacer de varias maneras, si eres nuevo en programación web te recomiendo usar un framework llamado bootstrap en el cual puedes lograr lo que tu quieres, pero de igual forma te dejo 2 formas de como lo puedes lograr Bootstrap 4 Tienes que tener instalado bootstrap dejo el link al sitio oficial: https://getbootstrap.com/docs/5.0/getting-started/introduction/

<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Document</title>

    <style>
        .picture {
          height: 32px; 
          width: 32px; 
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-6 "><!-- Puedes checar este link para orientarte como implementar estas clases https://getbootstrap.com/docs/4.6/layout/grid/#grid-options-->
            <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>   
        </div>
        <div class="col-md-3 col-6 "><!-- Puedes checar este link para orientarte como implementar estas clases https://getbootstrap.com/docs/4.6/layout/grid/#grid-options-->
            <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 2</span>
            </a>   
        </div>
        <div class="col-md-3 col-6 "><!-- Puedes checar este link para orientarte como implementar estas clases https://getbootstrap.com/docs/4.6/layout/grid/#grid-options-->
            <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 3</span>
            </a>   
        </div>
        <div class="col-md-3 col-6 "><!-- Puedes checar este link para orientarte como implementar estas clases https://getbootstrap.com/docs/4.6/layout/grid/#grid-options-->
            <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 4</span>
            </a>   
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    -->
  </body>
</html>

CSS3： para usarlo no es necesario instalar nada, pero puedes revisar la documentacion en el siguiente link https://www.w3schools.com/css/css_intro.asp de un curso que me ha enseñado la programación web。 Sin mas preámbulo dejo el link de como puedes implementarlo con CSS。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .picture {/*Los mismos estilos que vienes usando*/
          height: 32px; 
          width: 32px; 
        }
        .columna {width: 25%; float: left;} /*Aqui va a tener el espacio del 25% de la pantalla*/

        @media screen and (max-width: 768px) {/*Aqui le indicamos que cuando la pantalla tenga un tamaño de 768px de ancho va a realizar los siguientes estilos*/
            .columna {width: 50%;}  /*Aqui va a tomar el espacio de la mitad de la pantalla*/
        }
        
    </style>
</head>
<body>
    <div class="columna">
        <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>
    </div>
    <div class="columna">
        <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 2</span>
        </a>
    </div>
    <div class="columna">
        <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 3</span>
        </a>
    </div>
    <div class="columna">
        <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 4</span>
        </a>
    </div>
    
</body>
</html>