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

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>

现在的问题是，当（例如）window 的宽度减小时，页脚元素似乎散开，.creation 元素超出页脚并向下移动。

我想要做的（当以小 window 宽度或在移动设备屏幕上查看网站时）是 'center' 和 'stack' 页脚元素（.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
    }
}

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

希望对您有所帮助！

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

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

Changing positioning of elements depending on user screen size. How do I stack these elements for mobile devices?

html

javascript

css

mobile

footer