在响应式设计中的容器之间移动事物（媒体查询，css）

Question

假设我的 html header 中有一堆图标，但在非常小的屏幕中，我想将这些图标移到页脚中，或者 body ，或者其他的东西。对于 css 中的媒体查询，有没有办法让这些图标显示在它们在 html（即 header）中实际所在位置以外的地方？谢谢！

Answer 1

将图标栏放在页眉的 div 和页脚的 div 中，然后在 CSS 中执行类似

的操作

/* for screens 480px or larger */
@media screen and (min-width: 480px) {
    #header-icon-div {
        display:initial; /* you may want this to be block or inline-block */
    }
    #footer-icon-div {
        display:none;
    }
}
/* For screens less than 480px wide */
@media screen and (max-width: 480px) {
    #header-icon-div {
        display:none;
    }
    #footer-icon-div {
        display:initial; /* you may want this to be block or inline-block */
    }
}

在响应式设计中的容器之间移动事物（媒体查询，css）

Moving things between containers in responsive design (media queries, css)

html

css

media