當(dāng)您重新加載并且處于最小窗口大小時(shí)，第二個(gè)、第四個(gè)、第五個(gè)、第六個(gè)、第七個(gè)、第八個(gè)和第九個(gè)子級將設(shè)置為顯示：無。
當(dāng)您擴(kuò)大備份大小時(shí)，不會重置其中任何一個(gè)以實(shí)際顯示。
因此，您需要在較大的媒體尺寸中執(zhí)行一些操作，將它們設(shè)置為在您返回時(shí)顯示。
以下是一些關(guān)于如何確保元素在較大尺寸下可見的想法。
請閱讀評論，尤其是關(guān)于孩子 3 的評論 - 它總是可見嗎？我已經(jīng)放置了 display: block 來顯示子元素，但我無法知道這是否是元素中正常的設(shè)置。請?zhí)鎿Q為適合您的特定用例的任何內(nèi)容。
/* DONT FORGET WE NEED TO COPE WITH A WIDE SCREEN SO I'VE ADDED THIS */
td:nth-child,th:nth-child {
display: block;
}
/* we need to make sure that child 7 comes back into view */
@media (min-width: 1300px) and (max-width: 1555px) {
th {
color:brown;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: block;
}
}
/* at this, the 4th smallest, we need to make sure that child 6 comes back into view */
@media (min-width: 1200px) and (max-width: 1300px) {
th {
color:brown;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: block;
}
}
/* at this 3rd from smallest we need to make sure that child 5 comes back into view */
@media (min-width: 840px) and (max-width: 1200px) {
th {
color:red;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: block;
}
}
/* at the next to smallest the 4, 5, 6, 7 8, 9 children are display: none so we need to make sure that child 2 (and see comment below about child 3) is/are displayed */
@media (min-width: 520px) and (max-width: 840px) {
th {
color:orange;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
td:nth-child(2),th:nth-child(2) {
display: block;
}
td:nth-child(3),th:nth-child(3) { /* just to be on the safe side */
display: block;
}
td:nth-child(2),th:nth-child(2) {
display: block;
}
}
/* when very small the 2, 4, 5, 6, 7, 8, 9 children are display: none. DID YOU MEAN TO KEEP CHILD 2 DISPLAYED? */
@media (max-width: 520px) {
th {
color:yellow;
}
td:nth-child(9),th:nth-child(9) {
display: none;
}
td:nth-child(8),th:nth-child(8) {
display: none;
}
td:nth-child(7),th:nth-child(7) {
display: none;
}
td:nth-child(6),th:nth-child(6) {
display: none;
}
td:nth-child(5),th:nth-child(5) {
display: none;
}
td:nth-child(4),th:nth-child(4) {
display: none;
}
td:nth-child(2),th:nth-child(2) {
display: none;
}
}
