通常，我在做一个适合桌面屏幕、智能手机或平板电脑的响应式网站时没有问题，只需以“em”或百分比进行引用，并避免使用许多“宽度”。但是现在，我正在尝试在多级列表中响应，但没有成功，甚至试图强制媒体查询。 我在 Internet 上的一些网站上得到的多层次想法。 拜托，有人可以帮助我吗？为什么这段代码没有响应？
body, html {
font-family: Calibri, Helvetica, Arial, sans-serif;
font-size: 100%;
}
#optList {
width: 100%;
/* background: #e5e5e5; */
}
#optList ul {
list-style-type: none; /* to avoid list dot */
}
#optList label{
background-color: #297fb8;
border-radius: 7px;
padding: 0.5em 0.7em 0.5em 1.7em; /* distance to start text at label */
color: white;
}
#optList li {
margin: 1em 0em 1em 0em;
padding: 0.5em; /* 3px ? space around the label */
border-radius: 7px;
}
#optList input[type=checkbox] {
display: none; /* to avoid checkbox */
}
#optList input[type=checkbox] ~ ul { /* hidden subcategories trans=1 */
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
}
#optList input[type=checkbox]:checked ~ ul {
max-height: 100%;
max-width: 100%;
opacity: 1;
width: 90%;
}
#optList input[type=checkbox] + label:before { /* pointer 25,50 trans .5 */
transform-origin: 25% 50%; /* pointer */
border: 8px solid transparent;
border-width: 8px 12px;
border-left-color: white;
margin: 1px 0px 0px -20px;
width: 0;
height: 0;
display: inline-block;
text-align: center;
content: '';
position: relative;
}
#optList input[type=checkbox]:checked + label:before {
transform: rotate(90deg); /* pointer turn right */
}
@media screen and (min-width: 800px) { body { font-size: 1.0em; } }
@media screen and (min-width: 500px) { body { font-size: 1.3em; } }
@media screen and (min-width: 250px) { body { font-size: 1.6em; } } /* min-width if screen equal or greather min-width, consider */<body>
<nav id="optList">
<ul>
<li><input type="checkbox" id="op0"/><label for="op0">LEVEL ZERO</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" id="op1"/><label for="op1">LEVEL ONE</label>
<ul>
<li><input type="checkbox" id="op11"/><label for="op11">LEVEL ONE - OP1</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
<li><input type="checkbox" id="op12"/><label for="op12">LEVEL ONE - OP2</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" id="op2"/><label for="op2">LEVEL TWO</label>
<ul>
<li><input type="checkbox" id="op21"/><label for="op21">LEVEL TWO - OP1</label>
<ul>
<li><input type="checkbox" id="op21a"/><label for="op21a">LEVEL TWO - OP1 - A</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
<li><input type="checkbox" id="op21b"/><label for="op21b">LEVEL TWO - OP1 - B</label>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>最佳答案
媒体查询写得很好，但是如果你要使用最小宽度，你必须把它们放在正确的顺序
/* ... */
@media screen and (min-width: 250px) { body { font-size: 1.6em; } }
@media screen and (min-width: 500px) { body { font-size: 1.3em; } }
@media screen and (min-width: 800px) { body { font-size: 1.0em; } }
你实际上必须颠倒顺序，如上所示
关于html - html5/css3 中的响应式多级列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59571599/