屏幕尺寸更改时重新组织组件

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;
    }
}

Answer 2

您可以使用css媒体查询来执行此操作。