Question

将网站调整为移动视图大小后，是否可以删除一些列表元素？

我在导航栏中有一个水平菜单。说，像

glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, NULL);

在大于768像素的屏幕尺寸上，可以按原样显示整个菜单，但是一旦尺寸小于768像素，我希望它不显示链接3和4。

在CSS中，我尝试过

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

并将类添加到

元素

m-re { display: none; }

没用。

Answer 1

是，存在媒体查询这是文档https://www.w3schools.com/css/css3_mediaqueries_ex.asp 但是你可以做

    @media all and (min-width: 769px){
     #table_1 {display:block}
     #table_2 {display:none}
    }
    @media all and (max-width: 768px){
    #table_1 {display:none}
    #table_2 {display:block}
    }

Answer 2

您可以在不使用类的情况下完成此操作，请尝试

li:nth-child(3), li:nth-child(4){
  display: none;
}

然后为更大的屏幕设置媒体查询

@media only screen and (min-width: 768px){
    li:nth-child(3), li:nth-child(4){
        display: block;
    }
}

Here，您有一个密码笔！

Answer 3

媒体查询将对您有所帮助，您可以在此处阅读以下内容：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

在调整大小时删除某些列表元素（从桌面到移动设备视图）

3 个答案: