我在 CSS 中使用这些媒体查询来使页脚响应。
当屏幕变小时，我想让 3 列（#footer-left, #footer-middle, #footer-right）在彼此下方自动移动。
这样做的最佳方法是什么？我这里有一个小提琴：jsfiddle
/* for 980px or less */
@media screen and (max-width: 980px) {
#footer-left {
width: 41%;
padding: 1% 4%;
}
#footer-middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
border-right:none;
}
#footer-right {
padding: 1% 4%;
}
#footer-bottom {
display:none;
}
}
/* for 800px or less */
@media screen and (max-width: 780px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#footer-right {
display: none;
}
}