html5/css3 中的响应式多级列表

Question

通常，我在做一个适合桌面屏幕、智能手机或平板电脑的响应式网站时没有问题，只需在 "em" 或百分比中进行引用，并避免许多 "width"。但是现在，我正在尝试在多级列表中响应，但没有成功，甚至试图强制媒体查询。我在 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>

Answer 1

媒体查询写得很好，但是如果你要使用最小宽度，你必须把它们放在正确的顺序

/* ... */
@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; }  }

你实际上必须像上面那样颠倒顺序

html5/css3 中的响应式多级列表

Responsive multi level list in html5/css3

html

css

multi-level

responsive-design