javascript - 在 ReactJS 中构建响应式页脚

Question

我有一些问题想弄清楚如何设法构建响应式页脚。直到现在我得到了这个。在普通屏幕上看起来不错，但是当您切换到应用程序的“设备工具栏”(移动版)时，它变得一团糟。 (段落和图标相互重叠)如果我能在这里得到一些帮助，我会很高兴。谢谢。

[普通屏幕][1][1]: /image/HiZNV.jpg[移动屏幕][2][2]: /image/6LKMA.jpg

附言我正在 ReactJS 上构建我的应用程序，这是我的部分代码:

Footer.js

<div id='social'>

  <a className='fa fa-linked-in' target='_blank' rel='noopener noreferrer' href='https://linkedin.com/in/sample-7842b814a'></a>
  <a className='fa fa-github' target='_blank' rel='noopener noreferrer' href='https://github.com/sample'></a>
  <a className='fa fa-google' rel='noopener noreferrer' href="mailto:sample@gmail.com"></a>
  <a className='fa fa-instagram' target='_blank' rel='noopener noreferrer' href='https://www.instagram.com/sample/?hl=undefined'></a>

</div>

<div id='elements'>

  <img id='phone' src={phone} />
  <p>+32 696 69 69 69</p>

  <img id='email' src={email} /> <p>sample@gmail.com</p>
  <img id='pin' src={pin} /> <p>Antwerp , Belgium</p>
</div>

**应用.cs**

    #footer{
      background-color:#051222;
      width: 100%;
      height: 100px;
      position: absolute;
      overflow: hidden;
      bottom: 0;
      }
    
      @media only screen and (max-width: 480px) {
        #footer ul li a img {
          max-width: 100%;
          display: block;
          /* height: auto; */ 
         }
        }
   p {
  color: #d35360;
  display:inline-block;
  margin: 50px 40px 0 10px;  
  overflow: none;
  font-family: 'Lato', sans-serif;
}

img {
  height: 100%;
  vertical-align: middle;
}

Answer 1

也许您可以使用以下内容:

  @media only screen and (max-width: 480px) {
    #footer #elements, #footer #social {
      float:none; /* Ensure stacking */
      display:block; /* Ensure stacking */
      text-align:center; /* Ensure horizontal centering of all footer content */
    }

    #footer #elements {
      position:relative;
      padding-top: 1rem;  /* Reserve vertical space for phone number */
    }

    #footer #elements p {
      position:absolute; /* Causes the phone number to position above social buttons */
      top:0;
      left:0;
      right:0;
    }
  }

这将采用“垂直堆叠”布局方式，这是一种对移动设备更友好的方式。此解决方案还使用基于 position:absolute; 的技术将电话号码放在社交网络按钮上方。