根据用户屏幕大小更改元素的位置。如何为移动设备堆叠这些元素？

Question

我目前正在设计一个网站，但网站页脚存在问题。

在桌面上查看时，页脚如下所示： Website Footer viewed on Desktop

用于创建此外观的代码是：

<meta name="color:Footer Background Color" content="#000000">

CSS CODE

/*-----------------------------
        footer
-----------------------------*/
.bottom-footer {
    background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
    color: solid #000000;
}
.footer-message {
    display:flex;
    justify-content:space-between;
    list-style-type:none;
    width:500px;
}
 .bottom-footer {
    clear: both;
    height: 80px;
    width: 100%;
    position: relative;
    bottom: 0;
    z-index: 1
}
.bottom-footer p {
    font-size: 1.4rem
}
.footer-message {
    float: left;
    margin-top: 33px;
    margin-left: 20px
}
.creation {
    float: right;
    display: block;
    margin-top: 33px;
    margin-right: 20px;
    font-size: 1.4rem
}
.back-to-top {
    position: absolute;
    margin-top: 20px;
    text-align: center;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 30px
}
.back-to-top a {
    font-size: 3rem;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}
.back-to-top a:hover {
    opacity: .5;
    text-decoration: none
}
.back-to-top .fa-angle-up {
    font-size: 4rem
}
footer.bottom-footer {
        height: 150px
    }
    .footer-message {
        padding: 40px 0 0
    }
    .creation,
        padding: 10px 0 0
    }
    .creation,
    .footer-message {
        float: none;
        text-align: center;
        margin: 0
    }
    .back-to-top {
        margin-top: 0;
        top: 0
    }

HTML CODE

<footer class="bottom-footer">
    <p class="footer-message">
        <a href="/" style="font-size:1.4rem">Home</a>
        <a href="/about" style="font-size:1.4rem">About</a>
        <a href="/news" style="font-size:1.4rem">News</a>
        <a href="/musings" style="font-size:1.4rem">Musings</a>
        <a href="/music" style="font-size:1.4rem">Music</a>
        <a href="/media" style="font-size:1.4rem">Media</a>
        <a href="/shows" style="font-size:1.4rem">Shows</a>
        <a href="/store" style="font-size:1.4rem">Store</a>
        <a href="/contact" style="font-size:1.4rem">Contact</a>
        <a href="/ask" style="font-size:1.4rem">Ask</a>
    </p>
    <a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
    <div class="creation" style="text-decoration:none">
        © 2016 Sam Joel Nang. All Rights Reserved.
    </div>
</footer>

现在的问题是，当（例如）窗口的宽度减小时，页脚元素似乎分散，.creation 元素从页脚中移出并向下。

我想要做的（当在小窗口宽度或移动设备屏幕上查看网站时）是“居中”和“堆叠”页脚元素（.footer-message、.back-to-top 和.creation）按以下顺序排列：顶部：.back-to-top，中间：.footer-message，底部：.creation，页脚背景颜色仍为 #ffffff。一个小的照片编辑可以代表我的意思： Ideal Website Footer look on Mobile Device or small Desktop window width

我希望有人可以帮助我。非常感谢。

Answer 1

媒体查询简介

为了实现您的目标，您可以在 CSS 中使用媒体查询。

例如，如果您想在480px 或更小的屏幕宽度处堆叠页脚元素，则以下媒体查询将只允许您为该场景设置样式：

@media (max-width: 480px) {
  // Styles here
} 

鉴于此，让我们开始讨论堆叠。您当前在尝试堆叠的元素上有不同的位置属性。将元素堆叠在一起的最简单方法是使用属性display: block; 和float: left;。这样，元素将跨越其容器的宽度，并按照它们在文档 HTML 中的顺序出现。

让我们来看看你会怎么做：

@media (max-width: 480px) {
    .footer-message {
        float: left;
        display: block;
    }
    // center the links inside footer-message
    .footer-message a {
      text-align: center;
      width: 100%;
    }
    .creation {
        margin: 0 auto; // center it
        display: block;
    }
    .back-to-top {
        position: relative; // absolute positioning removes the element from document flow so we want to go relative
        display: block;
        margin: 0 auto; // center it
    }
}

请注意，我只是删除了其他属性，因为它们已经应用于所有屏幕尺寸。您可能希望更改此媒体查询中的内容，以防新样式影响其布局，或者您希望它在移动设备上有所不同。

希望有帮助！

更新：我刚刚注意到关于你想要将元素居中的部分，我在上面添加了一些代码来做到这一点。