Question

伙计们，我有一些问题要弄清楚如何建立一个快速响应的页脚。直到现在我都明白了。在正常屏幕上看起来不错，但是当您切换到应用程序的“设备工具栏”（移动版）时，它会变得混乱。（段落和图标互为作用）如果在这里可以得到一些帮助，我将感到很高兴。谢谢。

Normal Screen Mobile Screen 附言我正在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>

App.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;的技术，将电话号码放在社交网络按钮上方。

在ReactJS中建立响应式页脚

1 个答案: