在 ReactJS 中构建响应式页脚

Question

我有一些问题需要弄清楚如何设法构建响应式页脚。直到现在我得到了这个.在正常屏幕上看起来不错，但是当您切换到应用程序的"设备工具栏"(移动版本(时，它会变得混乱。(段落和图标彼此下(如果我能在这里得到一些帮助，我会很高兴。谢谢。

[普通屏幕][1] [1]： https://i.stack.imgur.com/HiZNV.jpg [手机屏幕][2] [2]： https://i.stack.imgur.com/6LKMA.jpg

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

页脚.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:[e-mail]"></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>[phone]</p>
<img id='email' src={email} /> <p>[e-mail]</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;的技术将电话号码放置在社交网络按钮上方。