html - 当屏幕尺寸改变时重新组织组件

Question

例如，当我有一个导航栏时:

<div class ="navBar"> 
  <ul>​
      <li> ​        <a id=​"nav-questions" href=​"/​questions">​Questions​</a>​
      </li>​
      <li> ​        <a id=​"nav-questions" href=​"/​questions">​Answers​</a>​
      </li>​ 
  </ul> 
</div>

这将在最大屏幕尺寸上显示如下内容:

问题 的 答案

但是当屏幕尺寸最小化到小于导航栏的尺寸时，它应该垂直堆叠，如下所示:

• 问题
• 答案

我读过一些关于 clearfix 的内容，但我不确定

Answer 1

您需要使用媒体查询，CSS 看起来像这样:

@media screen and (max-width:*insert nav width in pixels here*) {
    .navBar ul li {
        float: none;
        list-style-type: disc;
     }
}
 @media screen and (min-width:*insert nav width +1 in pixels here*) {
    .navBar ul li {
       float: left;
       list-style-type: none;
    }
}